fangliaoxiaochengxv/components/tabbar/tabbar.vue

<template>
	<view>

		<u-tabbar :value="current?current:1" @change="changeTab" :fixed="true" :safeAreaInsetBottom="true"
			:border="true" :placeholder="true" activeColor="#0BC3AA" inactiveColor="#AAAFC4">
			<u-tabbar-item v-for="(item,index) in list" :key="index" :name="item.id" :text="item.text">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
				<image class="u-page__item__slot-icon-index" slot="inactive-icon" :src="item.iconPath"></image>
			</u-tabbar-item>
		</u-tabbar>

	</view>
</template>

<script>
	export default {
		name: "tabbar",
		data() {
			return {
				list: [{
						id: 1,
						// 图片更换成自己的哈
						selectedIconPath: "../../static/index-b.png",
						iconPath: "../../static/index-a.png",
						text: '首页',
						pagePath: "pages/home/index"
					},
					{
						id: 2,
						selectedIconPath: "../../static/pd-b.png",
						iconPath: "../../static/pd-a.png",
						text: '产品',
						pagePath: "pages/productCenter/productCenter"
					},
					{
						id: 3,
						selectedIconPath: "../../static/cart-b.png",
						iconPath: "../../static/cart-a.png",
						text: '购物车',
						pagePath: "pages/shoppingCart/shoppingCart"
					},
					{
						id: 4,
						selectedIconPath: "../../static/mine-b.png",
						iconPath: "../../static/mine-a.png",
						text: '我的',
						pagePath: "pages/mine/index"
					}
				],
			};
		},
		props: {
			current: {
				type: Number,
				default: 1
			}
		},
		mounted() {

			const configs = uni.getStorageSync("configs");
			console.log("getConfigzj=>", configs);
			if (configs) {
				this.list[0].selectedIconPath = configs.menu1_on
				this.list[0].iconPath = configs.menu1_off

				this.list[1].selectedIconPath = configs.menu2_on
				this.list[1].iconPath = configs.menu2_off

				this.list[2].selectedIconPath = configs.menu3_on
				this.list[2].iconPath = configs.menu3_off

				this.list[3].selectedIconPath = configs.menu4_on
				this.list[3].iconPath = configs.menu4_off
			}
		},
		methods: {
			changeTab(e) {
				// 用 switchTab 的前提要在 pages.json中 注册好 tabBar
				//  可以把 switchTab换成其他的跳转(比如:navigateTo) 不过好像页面会闪一下，建议switchTab  
				uni.switchTab({
					url: '/' + this.list[e - 1].pagePath,
				})
			}
		}
	}
</script>

<style scoped>
	.u-page__item__slot-icon {
		width: 21px !important;
		height: 21px !important;
	}

	.u-page__item__slot-icon-index {
		width: 20px !important;
		height: 20px !important;
	}
</style>