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-WEIXINcircleProgress,// #endif// #ifdef APP-PLUSupdatedVersion,// #endifselectpopup,areaweather,tabBer},

5、在最后App.vue中

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