uniapp自定义tabber底部导航栏 需求:根据用户权限动态改变tabber长度(数量)

uniapp自定义tabber底部导航栏 需求:根据用户权限动态改变tabber长度数量

效果图

起步:预备动作: page.json 文件里面去掉默认的tabBar配置项；(让原生tabber消失)

 "custom": true,  // 这里开启自定义

第一步 封装一个tabber组件 1、page.json问价去掉默认的tabBar配置项；

<template>
    <cover-view class="uni-tabbar">
        <cover-view class="uni-tabbar__item" v-for="(item, index) in tabbar" :key="index" @tap="changeTab(item)">
            <cover-view class="uni-tabbar__bd">
                <cover-view class="uni-tabbar__icon">
                    <cover-image v-if="item.pagePath == pagePath" class="icon-img" mode="aspectFit" :src="item.selectedIconPath"></cover-image>
                    <cover-image v-else class="icon-img" mode="aspectFit" :src="item.iconPath"></cover-image>
                </cover-view>
            </cover-view>
            <cover-view class="uni-tabbar__label" :class="{ active: item.pagePath == pagePath }">{{ item.text }}</cover-view>
        </cover-view>
    </cover-view>
</template>

<script>
export default {
    props: {
        pagePath: String
    },
    data() {
        return {
            page: 'contact',
            showPage: false,
            containerHeight: 400,
            group_id: null,
            ppkk: false,
            tabbar: [
                //动态切换的菜单，先隐藏，动态插入
                {
                    pagePath: '/pages/statistics/statistics',
                    iconPath: '/static/images/tabBar/statistics.png',
                    selectedIconPath: '/static/images/tabBar/statistics-a.png',
                    text: '统计'
                },
                {
                    iconPath: '/static/images/tabBar/member.png',
                    pagePath: '/pages/management/management',
                    selectedIconPath: '/static/images/tabBar/member-a.png',
                    text: '管理'
                },
                {
                    pagePath: '/pages/my/my',
                    iconPath: '/static/images/tabBar/my.png',
                    selectedIconPath: '/static/images/tabBar/my-a.png',
                    text: '我的'
                },
            ]
        };
    },
    watch: {
        pagePath: {
            
            handler(val) {
                // console.log('pagePath监听===val', val);
            },
            immediate: true
        }
    },
    onShow() {
       
    },
    created() {
       // 根据自己的业务需求判断条件，替换即可
       const qx = uni.getStorageSync('group_id');
       console.log('当前用户权限等级为:' + qx);
       if (qx === 1) {
          this.tabbar.splice(1,1);
       }else if(qx===4) {
            this.tabbar.splice(0,1);
       }else if(qx>=5) {
           this.tabbar.splice(1,1);
       }
    },
    onLoad() {},
    mounted() {},
    methods: {
        changeTab(item) {
            // console.log(item)
            this.page = item.pagePath;
            const token = uni.getStorageSync('token');
            if (!token) {
               uni.reLaunch({
                   url: '/subpackages/login/login',
               });
            }
            // 使用reLaunch关闭所有的页面，打开新的栏目页面
            uni.switchTab({
                url:  this.page,
                success(e) {
                    var page = getCurrentPages().pop();
                    if (page == undefined || page == null) return;
                    page.onLoad();
                }
            });
            //切忌:勿用switchTab 方式 跳转  :原因-去看看 switchTab 方式跳转做了什么
        }
    }
};
</script>

<style lang="scss" scoped>
.uni-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    z-index: 999;
    width: 100%;
    display: flex;
    justify-content: space-around;
    height: 110rpx;
    // padding: 20rpx 0;
    box-sizing: border-box;
    border-top: solid 1upx #fff;
    background-color: #fff;
    box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);

    .uni-tabbar__item {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        align-content: space-around;
        font-size: 26rpx;
        text-align: center;
        width: 100%;
        // background-color: #0EA391;
        // opacity: 0.3;
        margin: 1rpx;
    }

    .uni-tabbar__icon {
        width: 100%;
        display: flex;
        justify-content: center;
        margin-bottom: 10rpx;
        // background-color: #0A98D5;
    }

    .icon {
        display: inline-block;
    }

    .uni-tabbar__label {
        color: #999;

        &.active {
            color: #1ca6ec;
        }
    }
    .icon-img {
        width: 100%;
    }
}
</style>

第二步 将封装的tabber组件 放到入到tabber页面

我引入到了main.js 变成-全局组件

import tabBar from "@/components/my-tabber/my-tabber.vue"
Vue.component('tabBar', tabBar)

在tabBar页面加入
如：/pages/statistics/statistics 页面，引入：

	<template>
		<view>
			<view class="uni-p-b-98">这里是内容块</view>
			<tabBar :pagePath="'/pages/statistics/statistics'"></tabBar>
		</view>
	</template>
<!-- 	最底部引入自定义组件，**pagePath对应当前显示的页面路径**，目的是为了让底部栏高亮 -->

第三步 解决小 bug

			 第一次进入小程序的时候  tabber栏 会闪一下(影响不大)   原因 ---tabber子组件 首次加载需要时间所以会闪 (这个bug) 个人觉得不太严重  没处理  (关键是 ,没有好的办法 ) 如果 有朋友处理了这个BUG  麻烦知会一声 大家相互学习嘛!