wx-qhb/components/kj-tabbar/kj-tabbar.vue

<template>
	<view>
		<u-tabbar :list="list" :fixed="true" :safeAreaInsetBottom="true" active-color="#F83224" inactive-color="#333"
			:value="value1">
			<u-tabbar-item :text="item.text" v-for="(item,idx) in list" @click="click1" :key="idx">
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="inactive-icon"
					:src="item.iconPath"></image>
				<image style="width: 40rpx;height: 40rpx;" class="u-page__item__slot-icon" slot="active-icon"
					:src="item.selectedIconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>
<script>
	import {
		mapState
	} from "vuex"
	import {
		created
	} from "../../uview-ui/libs/mixin/mixin"
	export default {
		name: "kj-tabbar",
		data() {
			return {
				list: [{
						"iconPath": '../../static/express1.png',
						"selectedIconPath": "../../static/express2.png",
						"text": "跨境速递",
						"pagePath": "pages/express/express"
					},
					{
						"iconPath": "../../static/index1.png",
						"selectedIconPath": "../../static/index2.png",
						"text": "商城",
						"pagePath": "pages/index/index"
					},
					{
						"iconPath": "../../static/shop.png",
						"selectedIconPath": "../../static/shop.png",
						"text": "购",
						"pagePath": "pages/shopping/shopping"
					},
					{
						"iconPath": "../../static/cart1.png",
						"selectedIconPath": "../../static/cart2.png",
						"text": "购物车",
						"pagePath": "pages/cart/cart"
					},
					{
						"iconPath": "../../static/mine1.png",
						"selectedIconPath": "../../static/mine2.png",
						"text": "我的",
						"pagePath": "pages/mine/mine"
					}
				],
				value1: 0,
			};
		},
		created() {
			if (uni.getStorageSync('tabbar')) {
				this.value1 = uni.getStorageSync('tabbar')
			}
		},
		methods: {
			click1(e) {
				this.value1 = e
				console.log(e);
				if (this.value1 == 4) {
					uni.navigateTo({
						url: '../../pages/mine/mine'
					})
				}
				if (this.value1 == 0) {
					uni.navigateTo({
						url: '../../pages/express/express'
					})
				}
				if (this.value1 == 1) {
					uni.navigateTo({
						url: '../../pages/index/index'
					})
				}
				if (this.value1 == 2) {
					uni.navigateTo({
						url: '../../pages/shopping/shopping'
					})
				}
				if (this.value1 == 3) {
					uni.navigateTo({
						url: '../../pages/cart/cart'
					})
				}
				uni.setStorageSync('tabbar', e)
			},
		}
		// created() {},
		// computed: {
		// 	...mapState(['config'])
		// },
		// watch: {
		// 	config: {
		// 		handler(val) {
		// 			if (val.report_switch == 1) {
		// 				this.list = [{
		// 						"iconPath": "/static/images/index.png",
		// 						"pagePath": "/pages/index/index",
		// 						"selectedIconPath": "/static/images/index1.png",
		// 						"text": "首页"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/video.png",
		// 						"pagePath": "/pages/video/video",
		// 						"selectedIconPath": "/static/images/video1.png",
		// 						"text": "视频"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/baobei.png",
		// 						"pagePath": "/pages/baobei/baobei",
		// 						"selectedIconPath": "/static/images/baobei1.png",
		// 						"text": "客户报备"
		// 					},
		// 					{
		// 						"iconPath": "/static/images/mine.png",
		// 						"pagePath": "/pages/mine/mine",
		// 						"selectedIconPath": "/static/images/mine1.png",
		// 						"text": "我的"
		// 					}
		// 				]
		// 			}
		// 		},
		// 		deep: true
		// 	}
		// }
	}
</script>

<style lang="scss">

</style>