uni-app添加⾃定义底部导航栏，实现根据权限动态切换底部栏
⽬的功能
uni-app针对底部导航栏TabBar，只提供了动态修改样式⽂字和图标的API，并没有提供动态修改某个栏⽬的跳转链接、追加或者删除某个栏⽬的功能。
问题阐述：实际开发的项⽬中的确需要判断登录账户的权限，来动态显⽰某两个，或者某三个栏⽬
如：管理⽤户显⽰【⾸页，管理，我的】，普通⽤户显⽰【⾸页，我的】，中间的管理页⾯，就得动态判断是否要追加了，实际切换效果如下图：
解决⽅案：隐藏原有的tabBar，添加⾃定义的底部导航栏
1、思路：参照原来导航栏的写法，延⽤原来TabBar的样式布局，在每个栏⽬的⾸页添加⾃定义导航栏，并使⽤固定定位放在底部，⾃定义组件的具体代码：
<!--
@时间：2020-03-16
@描述：⾃定义底部导航栏
@使⽤：
在main.js全部引⼊：
import tabBar from "@/pages/common/tabBar.vue"
Vueponent('tabBar', tabBar)
在需要显⽰的页⾯底部添加：
<view>
<view>这⾥是页⾯内容代码区域</view>
      　// 其中uni-p-b-98是公共样式类名，表⽰padding-bottom: 98upx;  设置的98upx是和底部导航栏的⾼度保持⼀致，页⾯的内容就不会被底部导航遮挡住啦
selectediconpath什么意思<view class="uni-p-b-98"></view>
      　// 最后引⼊⾃定义组件，并传当前栏⽬对应的pagePath到⾃定义组件，显⽰当前栏⽬的选中样式
<tabBar :pagePath="'/pages/tabBar/home/home'"></tabBar>
</view>
-->
<template>
<view class="uni-tabbar">
<view class="uni-tabbar__item" v-for="(item,index) in tabbar" :key="index" @tap="changeTab(item)">
<view class="icon" :class="[item.fontIcon , item.pagePath == pagePath?'uni-active':'']"></view>
<!-- 上⾯使⽤的是字体图标，解决切换页⾯的时候图标会闪的效果，毕竟每切换⼀个页⾯都会闪⼀下不太好看，可以切换使⽤下⾯的图⽚⽅式 -->
<view v-if="false" class="uni-tabbar__bd">
<view class="uni-tabbar__icon">
<image v-if="item.pagePath == pagePath" class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.selectedIconPath"></image>
<image v-else class="uni-w-42 uni-h-42" mode="aspectFit" :src="item.iconPath"></image>
</view>
</view>
<view class="uni-tabbar__label" :class="{'active': item.pagePath == pagePath}">
{{}}
</view>
</view>
</view>
</template>
<script>
export default {
props: {
pagePath: null
},
data() {
return {
page: 'contact',
showPage: false,
containerHeight: 400,
tabbar: [
{
"pagePath": "/pages/tabBar/home/home",
"iconPath": "/static/tabBar/home.png",
"selectedIconPath": "/static/tabBar/home_col.png",
"text": "⾸页",
"fontIcon": "icon-shouye"
            // 这⾥是要动态切换的栏⽬，先隐藏，动态追加
// {
//    "pagePath": "/pages/tabBar/manage/manage",
//    "iconPath": "/static/tabBar/home.png",
/
/    "selectedIconPath": "/static/tabBar/home_col.png",
//    "text": "管理",
//    "fontIcon": "icon-guanli"
// },
{
"pagePath": "/pages/tabBar/person/person",
"iconPath": "/static/tabBar/person.png",
"selectedIconPath": "/static/tabBar/person_col.png",
"text": "我的",
"fontIcon": "icon-wode"
}
]
};
},
mounted() {
// true为判断条件，根据实际的需求替换即可
if(true) {
this.tabbar.splice(1,0,
{
"pagePath": "/pages/tabBar/manage/manage",
"iconPath": "/static/tabBar/home.png",
"selectedIconPath": "/static/tabBar/home_col.png",
"text": "管理",
"fontIcon": "icon-guanli"
}
)
}
},
methods: {
changeTab(item) {
this.page = item.pagePath;
          // 这⾥使⽤reLaunch关闭所有的页⾯，打开新的栏⽬页⾯                Launch({
url: this.page
});
},
}
}
</script>
<style lang="scss" scoped>
[nvue] uni-scroll-view, [nvue] uni-swiper-item, [nvue] uni-view {
flex-direction: unset;
}
[nvue-dir-column] uni-swiper-item, [nvue-dir-column] uni-view {
flex-direction: unset;
}
.
uni-tabbar {
position: fixed;
bottom: 0;
z-index: 999;
width: 100%;
display: flex;
justify-content: space-around;
height: 98upx;
padding: 16upx 0;
box-sizing: border-box;
border-top: solid 1upx #ccc;
background-color: #fff;
box-shadow: 0px 0px 17upx 1upx rgba(206, 206, 206, 0.32);
.uni-tabbar__item {
display: block;
line-height: 24upx;
font-size: 20upx;
text-align: center;
}
.uni-tabbar__icon {
height: 42upx;
line-height: 42upx;
text-align: center;
}
.icon {
display: inline-block;
}
.uni-tabbar__label {
line-height: 24upx;
font-size: 24upx;
color: #999;
color: #1ca6ec;
}
}
}
</style>
2、关于字体图标的使⽤，因为⾃定义导航栏是放在每个页⾯的⾸页的，所以点击底部导航栏切换页⾯的时候，都会重新刷新加载，使⽤图⽚的话就会出现闪⼀下的情况。这⾥的话推荐使⽤阿⾥巴巴图标库，可以参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。