LocalLivingServicesUniapp/pages/groupMeal/tabbar/index.vue

<template>
	<u-tabbar :list="list" active-color="#449AFF" v-model="current" @change="onChange"></u-tabbar>
</template>

<script>
export default {
	name: "",
	props: {
		title: {
			default: '',
			type: String
		},
	},
	data() {
		return {
			list: [
				{
					iconPath: "/static/groupMeal/tab_un1.png",
					selectedIconPath: "/static/groupMeal/tab_1.png",
					text: "商品",
					customIcon: false,
                    urlPath: '/pages/groupMeal/goods/list'
				},
				{
					iconPath: "/static/groupMeal/tab_un2.png",
					selectedIconPath: "/static/groupMeal/tab_2.png",
					text: "订单",
					customIcon: false,
                    urlPath: '/pages/groupMeal/orders/order-alist'
				},
				{
					iconPath: "/static/groupMeal/tab_un3.png",
					selectedIconPath: "/static/groupMeal/tab_3.png",
					text: "设置",
					customIcon: false,
                    urlPath: '/pages/groupMeal/users/index'
				},
			],
			current: 0,
		};
	},
	mounted() {
        this.current = this.list.findIndex(item => item.urlPath === this.$route.path);
	},
	methods: {
		onChange(e) {
            uni.redirectTo({
                url: this.list[e].urlPath
            });
		},
	}
}
</script>

<style lang="scss" scoped>
::v-deep .u-tabbar__content__item__text {
	bottom: 4px;
}
</style>