<template>
<view>
<view class="container">
<view class="main-body">
<vote-info v-if="tabbarActive === 0"></vote-info>
<vote-info-detail v-if="tabbarActive === 1"></vote-info-detail>
<vote-info-rank v-if="tabbarActive === 2"></vote-info-rank>
</view>
<view class="floor-tabbar">
<van-tabbar :active="tabbarActive" @change="onTabbarChange()">
<van-tabbar-item>
<image slot="icon" :src="icon[0].normal" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" :src="icon[0].active" mode="aspectFit" style="width: 30px; height: 18px;" />
投票首页
</van-tabbar-item>
<van-tabbar-item>
<image slot="icon" :src="icon[1].normal" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" :src="icon[1].active" mode="aspectFit" style="width: 30px; height: 18px;" />
选手排名
</van-tabbar-item>
<van-tabbar-item>
<image slot="icon" :src="icon[2].normal" mode="aspectFit" style="width: 30px; height: 18px;" />
<image slot="icon-active" :src="icon[2].active" mode="aspectFit" style="width: 30px; height: 18px;" />
活动详情
</van-tabbar-item>
</van-tabbar>
</view>
</view>
</view>
</template>
通过这类的代码来判断是否显示组件界面,从而实现选中效果
tabbarActive监听tabbar变换
@change=”onTabbarChange()”通过监听变换来得到后文的event.detail,其实就是索引值(0,1,2…)
this.tabbarActive = event.detail把获得索引值赋值给tabbarActive 动态控制v-if,选择需要的页面显示
<script>
import VoteInfo from '../../components/vote-info/vote-info.vue'
import VoteInfoDetail from '../../components/vote-info-detail/vote-info-detail.vue'
import VoteInfoRank from '../../components/vote-info-rank/vote-info-rank.vue'
export default {
components: {
VoteInfo,
VoteInfoDetail,
VoteInfoRank
},
name: 'vote-navigate',
data() {
return {
tabbarActive: 0,
icon: [
{
text: '投票首页',
normal: '/static/imgVoteInfo/tabbar/riFill-magic-fill.svg',
active: '/static/imgVoteInfo/tabbar/riFill-magic-fill Copy.svg'
},
{
text: '选手排名',
normal: '/static/imgVoteInfo/tabbar/riFill-table-fill.svg',
active: '/static/imgVoteInfo/tabbar/riFill-table-fill Copy.svg'
},
{
text: '活动详情',
normal: '/static/imgVoteInfo/tabbar/riFill-article-fill.svg',
active: '/static/imgVoteInfo/tabbar/riFill-article-fill Copy.svg'
}
]
}
},
methods: {
// 底部标签栏转变
onTabbarChange(event) {
this.tabbarActive = event.detail
}
}
}
</script>
<style lang="less">
@import url('voteUserInfo.less');
</style>