uniapp自定义tabBar

uniapp自定义tabBar

1、在登录页中获取该用户所有的权限

getAppFrontMenu().then(res=>{
if(res.length > 0){
// 把所有权限存入缓存中
let firstPath = res.reverse()[0].path;
uni.setStorageSync('qx_data', res);
uni.switchTab({
url: firstPath,
})
// 方法二 通过uni.setTabBarItem（）中visible属性设置（app端可以微信小程序端不行）
//setTimeout(()=>{
//res.forEach( item => {
//uni.setTabBarItem({
//    index: item.priority,
//    visible: true
//})
//})
//}, 500)
} else {
uni.switchTab({
url:"/pages/my/index"
})
}

})

2、page.json list添加所有要用到的页面

"tabBar":{
"color": "#909199",
"selectedColor": "#FFFFFF",
"borderStyle": "black",
"backgroundColor": "#253C8C",
"list": [
{
"pagePath": "pages/index/index"
// "iconPath": "static/image/tabIcon/home.png",
// "selectedIconPath": "static/image/tabIcon/home_sel.png",
// "text": "首页",
// "visible": false
},
{
"pagePath": "pages/monitor/index"
// "iconPath": "static/image/tabIcon/yxjk.png",
// "selectedIconPath": "static/image/tabIcon/yxjk_sel.png",
// "text": "监控",
// "visible": false
},
{
"pagePath": "pages/data/data"
// "iconPath": "static/image/tabIcon/sjfx.png",
// "selectedIconPath": "static/image/tabIcon/sjfx_sel.png",
// "text": "数据",
// "visible": false
},
{
"pagePath": "pages/order/index"
// "iconPath": "static/image/tabIcon/ywgj.png",
// "selectedIconPath": "static/image/tabIcon/ywgj_sel.png",
// "text": "运维",
// "visible": false
},
{
"pagePath": "pages/my/index"
// "iconPath": "static/image/tabIcon/my.png",
// "selectedIconPath": "static/image/tabIcon/my_sel.png",
// "text": "我的",
// "visible": true
}
]
},

3、在components文件夹中创建tabBer.vue

<template>
<!-- 自定义tabBar 组件 -->
    <view class="tab-bar">
        <view class="content">
            <view class="one-tab" v-for="(item, index) in infoList" :key="index" @click="selectTabBar(item.pagePath)">
                <view>
                    <view class="tab-img">
                        <image v-if="routePath === item.pagePath" class="img" :src="item.selectedIconPath"></image>
                        <image v-else class="img" :src="item.iconPath"></image>
                    </view>
                </view>
                <view :class="['tit', routePath === item.pagePath ? 'sel' : '']">{{ item.text }}</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        // 当前页面路径
        routePath: {
            type: String,
            required: true
        }
    },
    data() {
        return {
// 底部导航栏所有数据
tabBarList:[
{
pagePath: "/pages/index/index",
iconPath: require("../static/image/tabIcon/home.png"),
selectedIconPath: require("../static/image/tabIcon/home_sel.png"),
text: "首页"
},
{
pagePath: "/pages/monitor/index",
iconPath: require("../static/image/tabIcon/yxjk.png"),
selectedIconPath: require("../static/image/tabIcon/yxjk_sel.png"),
text: "监控"
},
{
pagePath: "/pages/data/data",
iconPath: require("../static/image/tabIcon/sjfx.png"),
selectedIconPath: require("../static/image/tabIcon/sjfx_sel.png"),
text: "数据"
},
{
pagePath: "/pages/order/index",
iconPath: require("../static/image/tabIcon/ywgj.png"),
selectedIconPath: require("../static/image/tabIcon/ywgj_sel.png"),
text: "运维"
},
{
pagePath: "/pages/my/index",
iconPath: require("../static/image/tabIcon/my.png"),
selectedIconPath: require("../static/image/tabIcon/my_sel.png"),
text: "我的"
}
],
// 当前用户页面权限
infoList: []
};
    },
mounted() {
// 所有权限 主页面
let qx_data = uni.getStorageSync('qx_data');
if(qx_data && qx_data.length > 0){
qx_data.forEach(item=>{
this.infoList.push(this.tabBarList[item.priority]);
})
}else{
// 如果没有选页面默认展示'我的'页面
this.infoList.push(this.tabBarList[4]);
}
},
    methods: {
        selectTabBar(path) {
uni.switchTab({
url: path
})
            console.log('path',path);
        }
    }
};
</script>

<style lang="scss" scoped>
.tab-bar {
        position: fixed;
z-index: 1000;
        bottom: 0;
        left: 0;
        width: 100vw;
        padding: 0rpx;
        padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
        padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
        background-color: #253C8C;
color: #909199;
        padding-top: 12rpx;
        .content {
            display: flex;
            flex-direction: row;
            .one-tab {
                display: flex;
                flex-direction: column;
                align-items: center;
                width: 100%;
                .tab-img {
                    width: 50rpx;
                    height: 50rpx;
                    .img {
                        width: 100%;
                        height: 100%;
                    }
                }
                .tit {
                    font-size: 25rpx;
                    transform: scale(0.7);
                }
.sel {
color: #FFFFFF;
}
            }
        }
    }
</style>

4、在每个主页面中使用（pages/index/index.vue）导入 注册 使用 其他主页面同理 只需替换每个页面的routePath

<!-- 自定义tabBar -->
<tabBer routePath="/pages/index/index"/>
import tabBer from '@/components/tabBer.vue'; 
components: {
// #ifdef MP-WEIXIN
circleProgress,
// #endif
// #ifdef APP-PLUS
updatedVersion,
// #endif
selectpopup,
areaweather,
tabBer
},

5、在最后App.vue中

onShow: function() {
// 将默认的原生tabbar隐藏 
uni.hideTabBar();
},

原文地址：https://blog.csdn.net/weixin_50466102/article/details/140529408

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！