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 v-for="(item,index) in tabList" :key="index" class="fz28" :text="item.name"
				:icon="item.icon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				tabList: [ //tabbar列表
					{
						'name': '首页',
						'icon': 'home'
					},
					{
						'name': '点餐',
						'icon': 'grid'
					},
					{
						'name': '我的',
						'icon': 'account'
					}
				]
			}
		},
		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>