uni-app开发微信小程序，自定义tabbar（顺便解决首次加载闪动的问题）

因为UI兄嘚设计的tabbr比较有个性，所以我选择用自定义tabbar来做

一开始的方案是，做一个公共组件，样式就是固定在底部。然后分别放在四个tabbar页面中去

ok，开整

<template>
    <div class="tabbar-comp flex-center-sa">
        <view v-for="(item, index) in data.list" :key="index" 
            class="tabbar-item flex-center-c flex-y" 
            :class="[selected == index ? 'showLine' : '']"  
            @click="onSwitchTab(item, index)"
           >
            <image class="icon" :src="item.iconPath"></image>
            <view  class="text">{{item.text}}</view>
        </view>
    </div>
</template>

接收selected来控制当前选中谁

    defineProps({
        selected: {
            type: Number,
            default: 0
        }
    })

注意组件的list需要跟pages.json中tabbar的配置项一模一样，pages.json那边就不贴出来了

const data = reactive({
    "color": "#333",
    "selectedColor": "#000",
    "list": [{
            "pagePath": "/pages/tabbar/home/home",
            "text": "首页",
            "iconPath": "/static/images/tabbar/home-icon.png"
        },
        {
            "pagePath": "/pages/tabbar/community/community",
            "text": "社区",
            "iconPath": "/static/images/tabbar/community-icon.png"
        },
        {
            "pagePath": "/pages/tabbar/shopMall/shopMall",
            "text": "商城",
            "iconPath": "/static/images/tabbar/shopMall-icon.png"
        },
        {
            "pagePath": "/pages/tabbar/mine/mine",
            "text": "我的",
            "iconPath": "/static/images/tabbar/mine-icon.png"
        }
    ]
})

然后每一项的点击事件，要用switchTab去跳转

const onSwitchTab = (item, index) => {
    setStorage('selected', index)
    data.selected = index
    setTimeout(() => {
        uni.switchTab({
            url: item.pagePath
        })
    }, 300)
}

最后，需要去到每一个tabbar页面中的onshow事件里面用hideTabBar() 把原先它自带的tabbar隐藏。这样就相当于原来的4个tabbar页面是有的，只是下面的tabbar被我们自己写的tabbar组件给覆盖了。但是switchTab又是可以完美跳转，优秀…………

onShow(() => {
    uni.hideTabBar()
})

这样做下来最终效果还是会出现第一次切换这4个tabbar页，tabbar会闪动一次的问题。因为毕竟是放在4个页面中的，页面切换必然会闪，没办法，但是闪了一次之后就不会再闪了

测试的时候大佬说这种方案还是无法被客户接受，客户就是想要一次都不闪，无奈，最后只能是除首页外的其他3个tabbar页做成组件，然后统一引入首页，通过v-if去切换，这样大家都在一个页面里面，再怎么切换tabbar也不会闪了