uni-app 自定义头部底部tabbar

由于uni-app自带的tabbar不能完全满足需求，所以需要自己配置
首先在pages.json中每次注册一个新页面的style内添加

"navigationStyle":"custom",

图片：reg.png

然后进行在页面自定义就可以了
底部tabbar将pages.json注释

图片：tabbar.png

在vuex内state定义一个默认导航栏数组对象

图片：vuex.png

根据登录账户类型不同判断tabbar不同

// 获取tabbar
        getShopTabber(state, type) {
            // console.log(state)
            // console.log('1111111111')
            // console.log(type)
            // console.log(state.state.defaultTabL)
            if (type == 'delivery') {
                return state.state.defaultTabL
            }
            if (type == 'parker') {
                for (let i = 0; i < state.state.defaultTabL.length; i++) {
                    if (state.state.defaultTabL[0]) {
                        state.state.defaultTabL[0].title = 'home'
                    }
                    // if(state.state.defaultTabL[1]){
                    //     state.state.defaultTabL[1].title =  'haha'
                    // }
                    return state.state.defaultTabL
                }
            }
        }

使用
页面导入vuex

import {
        mapState,
        mapActions
    } from 'vuex'

在methods内将方法取出来

...mapActions(['getShopTabber'])

在挂载后

async mounted() {
    this.getShopTab = await this.getShopTabber(this.ShopType)
    console.log(this.getShopTab)
}

页面循环获取的数据

<view class="tabbars">
            <!-- <tabbar/> -->
            <view class="cu-bar tabbar bg-white shadow foot">
                <view class="action "
                @click="NavChange"
                v-for="(item,index) in getShopTab"
                :key="index"
                :data-bar="item.id">
                    <view>
                        <image :src="item.icon + (dataBar == item.id  ? '-1':'')+'.png'">
                        </image>
                    </view>
                    <view :class="dataBar == item.id ? 'text-green':'text-gray'">
                        pw_item.title
                    </view>
                </view>
</view>

图片：tabbar.png