uni-app添加自定义底部导航栏，实现根据权限动态切换底部栏目的功能

寂寞梧桐树 發表於 2020-3-16 18:26:00

uni-app添加自定义底部导航栏，实现根据权限动态切换底部栏目的功能

uni-app针对底部导航栏TabBar，只提供了动态修改样式文字和图标的API，并没有提供动态修改某个栏目的跳转链接、追加或者删除某个栏目的功能。
 
问题阐述：实际开发的项目中的确需要判断登录账户的权限，来动态显示某两个，或者某三个栏目
如：管理用户显示【首页，管理，我的】，普通用户显示【首页，我的】，中间的管理页面，就得动态判断是否要追加了，实际切换效果如下图：
 <img src="https://img2020.cnblogs.com/blog/1033932/202003/1033932-20200324145303044-1004389377.png" alt=""> <img src="https://img2020.cnblogs.com/blog/1033932/202003/1033932-20200324145327914-246804151.png" alt="">
 
 
解决方案：隐藏原有的tabBar，添加自定义的底部导航栏
1、思路：参照原来导航栏的写法，延用原来TabBar的样式布局，在每个栏目的首页添加自定义导航栏，并使用固定定位放在底部，自定义组件的具体代码：
 
<div class="cnblogs_code">
<pre>
<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=""></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}">
 {{item.text}}
 </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关闭所有的页面，打开新的栏目页面
 uni.reLaunch({
 url: this.page
 });
 },
 }
}
</script>

<style lang="scss" scoped> 
uni-scroll-view, uni-swiper-item, uni-view {
 flex-direction: unset;
}
uni-swiper-item, 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;
 &.active {
 color: #1ca6ec;
 }
 }
}
</style></pre>
</div>
 
 2、关于字体图标的使用，因为自定义导航栏是放在每个页面的首页的，所以点击底部导航栏切换页面的时候，都会重新刷新加载，使用图片的话就会出现闪一下的情况。这里的话推荐使用阿里巴巴图标库，可以参考：在uni-app中使用阿里巴巴图标库字体图标
 

</div>
<div id="MySignature" role="contentinfo">
前端菜鸟一枚，习惯记录平时遇到的一些问题和学习笔记，觉得有用的可以点个支持！有问题的也可以加QQ814878176交流哟 : ) 
来源：https://www.cnblogs.com/stella1024/p/12505482.html

頁: [1]

琼殿技术论坛's Archiver

uni-app添加自定义底部导航栏，实现根据权限动态切换底部栏目的功能