food_wechat/components/tabbar/tabbar.vue

<template>
	<view>
		<u-tabbar :value="current" @change="handleTabChange" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" activeColor="#D43030">
			<u-tabbar-item class="fz24" text="首页" icon="home"></u-tabbar-item>
			<u-tabbar-item class="fz24" text="点餐" icon="grid"></u-tabbar-item>
			<u-tabbar-item class="fz24" text="我的" icon="account"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {}
		},
		computed: {
			current() {
				return this.$store.state.tabbarCurrent
			}
		},
		methods: {
			handleTabChange(name) {
				// 更新当前选中的 tab 索引
				if (this.current === name) {
					return
				}
				this.$store.commit('setTabbarCurrent', name)
				if (name === 0) {
					uni.redirectTo({
						url: '/pages/index/index'
					})
				} else if (name === 1) {
					uni.navigateTo({
						url: '/pages/shop/list'
					})

				} else if (name === 2) {
					uni.redirectTo({
						url: '/pages/main/index'
					})
				}
			},
		}
	}
</script>

<style>

</style>