uniapp自定义tabbar

1，封装一个tabbar组件

2，正常编写官方的tabbar

3，在app.vue中的onShow中隐藏官方tabbar

组件

<template>
        <u-tabbar
            :value="value"
            :placeholder="true"
            @change="change"
            :fixed="true"
            :safeAreaInsetBottom="true"//是否开启安全距离
        >
            <template>
                <u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item>
                <u-tabbar-item text="分类" icon="home" dot ></u-tabbar-item>
                <view class="tabars">
                    <view class="item">
                        <image class="img" src="../static/logo.png" mode="widthFix"></image>
                    </view>
                </view>
                <u-tabbar-item text="购物车" icon="photo" badge="3"></u-tabbar-item>
                <u-tabbar-item text="我的" icon="photo" badge="3"></u-tabbar-item>
            </template>
        </u-tabbar>
</template>

<script>
    export default {
        data() {
            return {
                value:  getApp().globalData.index,
            }
        },
        onLoad() {
            // this.value = getApp().globalData.index
        },
        methods: {
            change(e){
                getApp().globalData.index = e
                this.$emit('tab',e)
            }
        }
    }
</script>

<style lang="less">
 .tabars{
     width: 90rpx;
     height: 70rpx;
     display: flex;
     flex-direction: column;
     align-content: center;
     position: relative;
     bottom: 50rpx;
     border-radius: 50%;
     background-color: #fff;
     border-top: 2px solid #dadbde;
     padding: 30rpx;
     .item{
         width: 100%;
         height: 100%;
         display: flex;
         justify-content: center;
         .img{
             width: 80%;
         }
     }
 }
</style>

页面组册引入

<Bars @tab='tab'></Bars>
import Bars from '../../components/tabbar.vue';
components: {
    Bars
},

methods: {
 tab(e) {
    getApp().globalData.index = e
    if(e==1){
       uni.switchTab({
           url: '../classification/classification'
       })
    }else if(e==2){
       uni.switchTab({
         url: '../car/car'
       })
    }else if(e==3){
       uni.switchTab({
    　　　　url: '../me/me'
    　　})
    }
 }           
}

在app.vue中存储公共变量

<script>
    export default {
        onLaunch: function() {
            console.log('App Launch')
            uni.hideTabBar()
        },
        onShow: function() {
            console.log('App Show')
            //隐藏官方tabbar
            uni.hideTabBar()
        },
        onHide: function() {
            console.log('App Hide')
        },
        globalData: {
            index:0,
        }
    }
</script>