<template>
<div>
<tab :line-width="1" custom-bar-width="24px" class="container">
<tab-item selected class="item" @on-item-click="handleShowQueueUp">排队</tab-item>
<tab-item class="item" @on-item-click="handleShowSubscribe">预约</tab-item>
</tab>
<component
v-bind:is="showQueueUp"
:queueList="queueList"
:subscribe="subscribe"
@addQueue="getCarQueueUpList"
class="queue"
></component>
</div>
</template>
<script>
import { Tab, TabItem } from "vux";
import QueueList from "./components/QueueUpList";
import Subscribe from "./components/SubscribeList";
export default {
name: "Queue",
components: {
Tab,
TabItem,
QueueList,
Subscribe
},
data() {
return {
showQueueUp: QueueList,
queueList: [],
subscribe: []
};
},
methods: {
handleShowQueueUp() {
this.showQueueUp = QueueList;
},
handleShowSubscribe() {
this.showQueueUp = Subscribe;
},
}
},
}
};
</script>
<style scoped lang="less">
.item {
background-size: 100% 0px !important;
}
.container {
position: fixed;
width: 100%;
background: white;
top: 0;
left: 0;
z-index: 2;
}
.queue {
margin-top: 60px;
}
</style>
动态组件Tab切换
猜你喜欢
转载自blog.csdn.net/qq_38367710/article/details/84440003
今日推荐
周排行