uniapp自定义tabbar组件解决闪烁问题

自定义tabbar组件，根据uni-app的easycom将其精简为- 步。只要组件安装在项目的components目录下或uni_ modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

<template>
    <view class="tab-bar">
        <view v-for="(item,index) in list" :key="index" class="tab-bar-item" @click="switchTab(item, index)">
            <image class="tab_img" :src="selected === index ? item.selectedIconPath : item.iconPath"></image>
            <view class="tab_text" :style="{color: selected === index ? selectedColor : color}">{{item.text}}</view>
        </view>
    </view>
 
</template>
 
 
 
<script>
    export default {
        props: {
            selected: { //当前选中的tab index
                type: Number,
                default: 0
            }
 
        },
        data() {
            return {
                color: "#3a3a3a",
                selectedColor: "#32e8e6",
				borderStyle: "black",
				backgroundColor: "#ffffff",
                list: [{
                    pagePath: "/pages/index/index",
                    iconPath: "/static/tab-home.png",
                    selectedIconPath: "/static/tab-home-current.png",
                    text: "首页"
                },{
				    pagePath: "/pages/category/category",
				    iconPath: "/static/tab-cate.png",
				    selectedIconPath: "/static/tab-cate-current.png",
				    text: "分类"
				},{
                    pagePath: "/pages/cart/cart",
                    iconPath: "/static/tab-cart.png",
                    selectedIconPath: "/static/tab-cart-current.png",
                    text: "购物车"
                },{
                    pagePath: "/pages/user/user",
                    iconPath: "/static/tab-my.png",
                    selectedIconPath: "/static/tab-my-current.png",
                    text: "我的"
                }]
            }
        },
        methods: {
            switchTab(item, index) {
                let url = item.pagePath;
				uni.switchTab({
					url:item.pagePath
				})
            },
        }
    }
</script>

tabbar自定义组件组件种使用uni.switchTab跳转页面

uni.switchTab({
	url: val.url
})

在pages.json配置tabbar，路径设置成一样

"tabBar": {
		"color": "#C0C4CC",
		"selectedColor": "#fa436a",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
				"pagePath": "pages/index/index",
				"iconPath": "static/tab-home.png",
				"selectedIconPath": "static/tab-home-current.png",
				"text": "首页"
			},
			{
				"pagePath": "pages/category/category",
				"iconPath": "static/tab-cate.png",
				"selectedIconPath": "static/tab-cate-current.png",
				"text": "分类"
			},
			{
				"pagePath": "pages/cart/cart",
				"iconPath": "static/tab-cart.png",
				"selectedIconPath": "static/tab-cart-current.png",
				"text": "购物车"
			},
			{
				"pagePath": "pages/user/user",
				"iconPath": "static/tab-my.png",
				"selectedIconPath": "static/tab-my-current.png",
				"text": "我的"
			}
		]
	}

在App.vue里面设置隐藏tabbar

	onShow: function() {
		uni.hideTabBar()
	},