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

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

uni-app针对底部导航栏TabBar,只提供了动态修改样式文字和图标的API,并没有提供动态修改某个栏目的跳转链接、追加或者删除某个栏目的功能。问题阐述:实际开发的项目中的确需

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给顶部导航栏添加自定义字体图标

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


推荐阅读
  • 本文介绍了如何在 ASP.NET 中设置 Excel 单元格格式为文本,获取多个单元格区域并作为表头,以及进行单元格合并、赋值、格式设置等操作。 ... [详细]
  • NX二次开发:UFUN点收集器UF_UI_select_point_collection详解
    本文介绍了如何在NX中使用UFUN库进行点收集器的二次开发,包括必要的头文件包含、初始化和选择点集合的具体实现。 ... [详细]
  • LDAP服务器配置与管理
    本文介绍如何通过安装和配置SSSD服务来统一管理用户账户信息,并实现其他系统的登录调用。通过图形化交互界面配置LDAP服务器,确保用户账户信息的集中管理和安全访问。 ... [详细]
  • 如果应用程序经常播放密集、急促而又短暂的音效(如游戏音效)那么使用MediaPlayer显得有些不太适合了。因为MediaPlayer存在如下缺点:1)延时时间较长,且资源占用率高 ... [详细]
  • Python多线程详解与示例
    本文介绍了Python中的多线程编程,包括僵尸进程和孤儿进程的概念,并提供了具体的代码示例。同时,详细解释了0号进程和1号进程在系统中的作用。 ... [详细]
  • malloc 是 C 语言中的一个标准库函数,全称为 memory allocation,即动态内存分配。它用于在程序运行时申请一块指定大小的连续内存区域,并返回该区域的起始地址。当无法预先确定内存的具体位置时,可以通过 malloc 动态分配内存。 ... [详细]
  • 包含phppdoerrorcode的词条 ... [详细]
  • 本文详细介绍了Linux系统中用于管理IPC(Inter-Process Communication)资源的两个重要命令:ipcs和ipcrm。通过这些命令,用户可以查看和删除系统中的消息队列、共享内存和信号量。 ... [详细]
  • 网络爬虫的规范与限制
    本文探讨了网络爬虫引发的问题及其解决方案,重点介绍了Robots协议的作用和使用方法,旨在为网络爬虫的合理使用提供指导。 ... [详细]
  • 自动验证时页面显示问题的解决方法
    在使用自动验证功能时,页面未能正确显示错误信息。通过使用 `dump($info->getError())` 可以帮助诊断和解决问题。 ... [详细]
  • 经过一年的思考,我发现自己对开发的兴趣并不浓厚,而对算法研究则更加热衷。本文将探讨开发与算法之间的本质差异,并分享我的未来学习计划。 ... [详细]
  • 自然语言处理(NLP)——LDA模型:对电商购物评论进行情感分析
    目录一、2020数学建模美赛C题简介需求评价内容提供数据二、解题思路三、LDA简介四、代码实现1.数据预处理1.1剔除无用信息1.1.1剔除掉不需要的列1.1.2找出无效评论并剔除 ... [详细]
  • 本文介绍了Java编程语言的基础知识,包括其历史背景、主要特性以及如何安装和配置JDK。此外,还详细讲解了如何编写和运行第一个Java程序,并简要介绍了Eclipse集成开发环境的安装和使用。 ... [详细]
  • Bootstrap 缩略图展示示例
    本文将展示如何使用 Bootstrap 实现缩略图效果,并提供详细的代码示例。 ... [详细]
  • 本文介绍了一种支付平台异步风控系统的架构模型,旨在为开发类似系统的工程师提供参考。 ... [详细]
author-avatar
絮尘飘雪_896
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有