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();
	},