热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

开发笔记:uniapp添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能

篇首语:本文由编程笔记#小编为大家整理,主要介绍了uni-app添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能相关的知识,希望对你有一定的参考价值。

篇首语:本文由编程笔记#小编为大家整理,主要介绍了uni-app添加自定义底部导航栏,实现根据权限动态切换底部栏目的功能相关的知识,希望对你有一定的参考价值。



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

 

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

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

  

 

 

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

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

 



<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中使用阿里巴巴图标库字体图标

 



推荐阅读
author-avatar
老黑_微笑
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有