uni-app+Vant 如何自定义tabbar

uni-app中如何自定义tabbar跳转

1、主界面tabbar

html

<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>

js css

<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>

<vote-info v-if="tabbarActive === 0"></vote-info>通过这类的代码来判断是否显示组件界面，从而实现选中效果

tabbarActive监听tabbar变换

@change="onTabbarChange()"通过监听变换来得到后文的event.detail，其实就是索引值（0,1,2…)

this.tabbarActive = event.detail把获得索引值赋值给tabbarActive 动态控制v-if，选择需要的页面显示

2、组件代码

vote-info.vue

<!-- 投票首页 -->
<template>
	<view>
    投票首页
	</view>
</template>

<script>

</script>

<style>
@import url('vote-info.less');
</style>

vote-info-detail.vue

<!-- 活动详细 -->
<template>
	<view>
		活动详情
		<!-- <view class="floor-tabbar"><vote-navigate :tabbarIndex="tabbarIndex" /></view> -->
	</view>
</template>

<script>
export default {
	data() {
		return {
			// tabbarIndex: 2
		}
	},
	methods: {

	}
}
</script>
<style></style>

vote-info-rank.vue

<!-- 选手排名 -->
<template>
	<view>
		<view class="floor-tabbar">
			这里是排名
			<!-- <vote-navigate :tabbarIndex="tabbarIndex" /> -->
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			// tabbarIndex:1,
		}
	},
	methods: {

	}
}
</script>
<style></style>

3、实测结果图