码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2020-03-16 19:04:41      阅读:683      评论:0      收藏:0      [点我收藏+]

标签:实现   png   tom   scope   play   swipe   z-index   html   blog   

uni-app针对底部导航栏TabBar,只提供了动态修改样式文字和图标的API,并没有提供动态修改某个栏目的跳转链接、追加或者删除某个栏目的功能。

 

问题阐述:实际开发的项目中的确需要判断登录账户的权限,来动态显示某两个,或者某三个栏目

如:管理用户显示【首页,管理,我的】,普通用户显示【首页,我的】,中间的管理页面,就得动态判断是否要追加了

 

解决方案:隐藏原有的tabBar,添加自定义的底部导航栏

1、思路:参照原来导航栏的写法,延用原来TabBar的样式布局,在每个栏目的首页添加自定义导航栏,并使用固定定位放在底部,自定义组件的具体代码:

 

<!--
    @时间:2020-03-16
    @描述:自定义底部导航栏
    @使用:
        在main.js全部引入:
            import tabBar from "@/pages/common/tabBar.vue"
            Vue.component(‘tabBar‘, tabBar)
        
        在需要显示的页面底部添加:
        <view>
            上面是内容块
       // 其中uni-p-b-98是公共样式类名,表示padding-bottom: 98upx; 设置的98upx是和底部导航栏的高度保持一致,页面的内容就不会被底部导航遮挡住啦 <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}"> {{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>
[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; &.active { color: #1ca6ec; } } } </style>

 

 2、关于字体图标的使用,因为自定义导航栏是放在每个页面的首页的,所以点击底部导航栏切换页面的时候,都会重新刷新加载,使用图片的话就会出现闪一下的情况。这里的话推荐使用阿里巴巴图标库,可以参考前面写的文章:uni-app给顶部导航栏添加自定义字体图标

 

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

标签:实现   png   tom   scope   play   swipe   z-index   html   blog   

原文地址:https://www.cnblogs.com/stella1024/p/12505482.html

(1)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!