优雅实现微信小程序动态tabBar，根据不同用户角色显示不同底部导航——更新版（支持自由组合总数超过5个tabBar菜单）

背景

在开发小程序过程中，有个需求是，小程序底部的tabBar需要根据不同用户角色显示不同底部导航。此时就需要用到自定义底部导航 custom-tab-bar。

上次发文是组合显示4个底部tabBar导航，很多小伙伴评论说组合超过5个怎么办。他们的需求总数超过5个了。

现在我在这里更新一下。
1、实现自由组合tabBar菜单项目，支持自由组合总数超过5个tabBar菜单。
2、本示例是7个底部导航，分2种权限，权限1显示1，2，3；权限2显示4，5，6，7；
3、当然你也可以自由其他组合，比如：权限1显示1，4；权限2显示1，2，3，4；
4、本示例只是提供了思路及方法，你可以自由扩展。

实现步骤：

1、我们先在utils目录中创建tab-service.js文件，写上全局的数据及方法；
// tabBar的data
let tabData = {
  tabIndex: 0,//底部按钮高亮下标
  tabBar: {
      custom: true,
      color: "#5F5F5F",
      selectedColor: "#07c160",
      backgroundColor: "#F7F7F7",
      list: []
  }
}

// 更新菜单
const updateRole = (that, type) => {
  //这里设置权限（分2种权限，权限1显示1，2，3；权限2显示4，5，6，7；）
 if (type === '0') {
    tabData.tabBar.list=[
      {
        "pagePath": "pages/index1",
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        "text": "按钮1"
      },
      {
        "pagePath": "pages/index2",
        "iconPath": "/image/icon_API.png",
        "selectedIconPath": "/image/icon_API_HL.png",
        "text": "按钮2"
      },
      {
        "pagePath": "pages/index3",
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        "text": "按钮3"
      },
    ]
  }else if (type === '1'){
    tabData.tabBar.list=[{
      "pagePath": "pages/index4",
      "iconPath": "/image/icon_API.png",
      "selectedIconPath": "/image/icon_API_HL.png",
      "text": "按钮4"
    },
    {
      "pagePath": "pages/index5",
      "iconPath": "/image/icon_component.png",
      "selectedIconPath": "/image/icon_component_HL.png",
      "text": "按钮5"
    },
    {
      "pagePath": "pages/index6",
      "iconPath": "/image/icon_API.png",
      "selectedIconPath": "/image/icon_API_HL.png",
      "text": "按钮6"
    },
    {
      "pagePath": "pages/index7",
      "iconPath": "/image/icon_API.png",
      "selectedIconPath": "/image/icon_API_HL.png",
      "text": "按钮7"
    }]
  } 
  updateTab(that);
}
 
// 更新底部高亮
const updateIndex = (that, index) => {
  tabData.tabIndex = index;
  updateTab(that);
}
 
// 更新Tab状态
const updateTab = (that) => {
  if (typeof that.getTabBar === 'function' && that.getTabBar()) {
      that.getTabBar().setData(tabData);
  }
}
 
// 将可调用的方法抛出让外面调用
module.exports = {
  updateRole, updateTab, updateIndex,tabBar:tabData.tabBar.list
}
2、在app.json文件中配置导航信息
{
  "pages": [
    "pages/index",
    "pages/index1",
    "pages/index2",
    "pages/index3",
    "pages/index4",
    "pages/index5",
    "pages/index6",
    "pages/index7"
  ],
  "tabBar": {
    "custom": true,
    "color": "#5F5F5F",
    "selectedColor": "#07c160",
    "borderStyle": "black",
    "backgroundColor": "#F7F7F7",
    "list": [
      {
        "pagePath": "pages/index1",
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        "text": "按钮1"
      },
      {
        "pagePath": "pages/index2",
        "iconPath": "/image/icon_API.png",
        "selectedIconPath": "/image/icon_API_HL.png",
        "text": "按钮2"
      },
      {
        "pagePath": "pages/index3",
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        "text": "按钮3"
      },
      {
        "pagePath": "pages/index4",
        "iconPath": "/image/icon_API.png",
        "selectedIconPath": "/image/icon_API_HL.png",
        "text": "按钮4"
      },
      {
        "pagePath": "pages/index5",
        "iconPath": "/image/icon_component.png",
        "selectedIconPath": "/image/icon_component_HL.png",
        "text": "按钮5"
      },
      {
        "pagePath": "pages/index6",
        "iconPath": "/image/icon_API.png",
        "selectedIconPath": "/image/icon_API_HL.png",
        "text": "按钮6"
      },
      {
        "pagePath": "pages/index7",
        "iconPath": "/image/icon_API.png",
        "selectedIconPath": "/image/icon_API_HL.png",
        "text": "按钮7"
      }
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  }
}

注意：“custom”: true是重点，默认是没有这个字段的，在配置项中新增即可；
这里不用管tabBar的list超过5个，因为后面是使用自定义组件，完全接管 tabBar 的渲染

3、根目录下创建custom-tab-bar目录
custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss
4、编写custom-tab-bar组件

用自定义组件的方式编写即可，该自定义组件完全接管 tabBar 的渲染。

4.1、custom-tab-bar/index.wxml
<!--miniprogram/custom-tab-bar/index.wxml-->
<view class="tabBar">
  <view class="tabBarItem" wx:for="{{tabBar.list}}" wx:key="index" data-path="{{'/' + item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <image class="itemImage" src="{{tabIndex === index ? item.selectedIconPath : item.iconPath}}"></image>
    <view class="itemTitle" style="color: {{tabIndex === index ? tabBar.selectedColor : tabBar.color}}">{{item.text}}</view>
  </view>
</view>

其中tabBar就是在tab-service.js文件中写的公共数据。

4.2、custom-tab-bar/index.js
Component({
  data: {},
  methods: {
      switchTab(event) {
          // data为接受到的参数
          const data = event.currentTarget.dataset;
          // 取出参数中的path作为路由跳转的目标地址
          wx.switchTab({url: data.path});
      },
  }
})
4.3、custom-tab-bar/index.wxss
.tabBar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
  border-top: 1px solid #c1c1c1;
}

.tabBarItem {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.itemImage {
  width: 26px;
  height: 26px;
}

.itemTitle {
  font-size: 10px;
}
4.4、custom-tab-bar/index.json
{
  "component": true
}
5、登录页面获取角色（pages/index.js）
// 全局tab-service.js，引入一下
const tabService = require("../utils/tab-service")

/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
    //这里设置权限（0：显示1，2，3导航3个按钮，1：显示4，5，6，7导航4个按钮）
    //当然你也可以自由其他组合，比如：权限1显示1，4；权限2显示1，2，3，4；
    //注意你的index下标，及不同权限第一个页面的跳转路径
    //以下是0
    tabService.updateRole(this, '0')
    wx.switchTab({
      url:'/pages/index1'
    })
    //以下是1，从4开始
    // tabService.updateRole(this, '1')
    // wx.switchTab({
    //   url:'/pages/index4'
    // })
},
6、对应tab页面（pages/index1.js）
// 全局tab-service.js，引入一下
const tabService = require("../utils/tab-service");

/**
* 生命周期函数--监听页面显示
*/
onShow() {
    //更新底部高亮
    tabService.updateIndex(this, 0)
},

其他几个tabBar页面也是一样，每个导航对一个页面，0,1,2,3以此类推即可；
注意你的index下标，及不同权限页面里面对应的高亮下标设置。

7、项目整体目录

在这里插入图片描述

8、实现后的效果

1种权限显示3个按钮（这里做的是显示1，2，3导航）

在这里插入图片描述

另1种权限显示4个按钮（这里做的是显示4，5，6，7导航）

在这里插入图片描述

8、示例代码

相关的示例代码已经上传，可以到顶部下载下来运行查看效果。

修改好权限后，记得要重新编译哦。

其他需求或问题可以评论留言。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/292672.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

C语言KR圣经笔记 5.6指针数组；指针的指针

C语言KR圣经笔记 5.6指针数组；指针的指针

5.6 指针数组&#xff1b;指针的指针 因为指针本身也是变量&#xff0c;所以它们也能像其他变量一样保存在数组里面。我们写个程序来说明&#xff0c;该程序将一些文本行按照字母顺序排列&#xff0c;算是 UNIX 程序 sort 的精简版本。 在第三章中&#xff0c;我们介绍了对一…
阅读更多...
设计创新，流程优化：3D开发HOOPS在数字化工厂中的多面应用

设计创新，流程优化：3D开发HOOPS在数字化工厂中的多面应用

随着科技的不断发展&#xff0c;数字化转型已经成为各行各业的共同趋势&#xff0c;而工业领域也不例外。在这一浩大的变革浪潮中&#xff0c;Tech Soft 3D的HOOPS正以其卓越的性能和多功能性&#xff0c;成为数字化工厂领域的关键推动力。 数字化工厂概述 数字化工厂是指通过…
阅读更多...
ssl证书(https/wss)内网测试

ssl证书(https/wss)内网测试

前言 一般后端部署到外网&#xff0c;可以去申请免费的SSL 证书&#xff0c; 但在内网测试时&#xff0c;需要自己生成证书 本章主要讲述ssl证书生成 1:环境 生成证书 openssl &#xff08;windows or linux 都行) 2:生成证书 1>生成私钥 pkcs#1私钥 openssl genrsa -out…
阅读更多...
uniCloud 云函数

uniCloud 云函数

相对于云函数&#xff0c;官方更推荐使用 云对象 新建云函数 编辑云函数 uniCloud-aliyun/cloudfunctions/hello_func/index.js use strict; exports.main async (event, context) > {let {name} eventreturn 你好&#xff0c;${name}! };云函数接收的参数从event中解构获…
阅读更多...
Js的String的replace(和replaceAll(

Js的String的replace(和replaceAll(

EcmaJavascriptJs的String的 replace( 和 replaceAll( 方法 String.prototype.replaceString.prototype.replaceAll 相同点 都是String.prototype的函数都是用于字符串替换都是两个参数第一个参数都可以是正则或字符串第二参数都可以是字符串或者回调函数, 回调会传入一个参…
阅读更多...
YOLOv8改进 | 主干篇 | EfficientNetV1均衡缩放网络改进特征提取层

YOLOv8改进 | 主干篇 | EfficientNetV1均衡缩放网络改进特征提取层

一、本文介绍 这次给大家带来的改进机制是EfficientNetV1主干，用其替换我们YOLOv8的特征提取网络，其主要思想是通过均衡地缩放网络的深度、宽度和分辨率，以提高卷积神经网络的性能。这种方法采用了一个简单但有效的复合系数，统一调整所有维度。经过我的实验该主干网络确实…
阅读更多...
Linux系统：进程和计划任务管理

Linux系统：进程和计划任务管理

目录 一、程序 二、进程 1、什么是进程 1.1 进程的概念 1.2 进程的特征 1.3 进程、线程和协程 2、进程状态 3、进程的类型 4、进程使用内存出现的问题 三、进程管理相关命令 1、ps&#xff08;process state&#xff09; 1.1 用法 1.2 分析ps命令输出的内容 2、t…
阅读更多...
基于STM32的ESP8266 WiFi模块数据采集与显示

基于STM32的ESP8266 WiFi模块数据采集与显示

基于STM32的ESP8266 WiFi模块数据采集与显示是一种常见的嵌入式系统应用&#xff0c;通常用于远程数据监测和控制。在这种应用中&#xff0c;STM32作为主控制器负责采集周围环境的数据&#xff0c;通过ESP8266 WiFi模块将数据发送到远程服务器&#xff0c;并在远程服务器上进行…
阅读更多...
前端跨域问题的解决思路

前端跨域问题的解决思路

目录 前言 跨域问题的解决思路 一般跨域的解决方案 前言 做了一个简单页面&#xff0c;做了一些数据埋点&#xff0c;想通过企业微信机器人来推送数据&#xff0c;遇到了一些问题&#xff0c;顺便记录下。 跨域问题的解决思路 由于是项目比较简单&#xff0c;直接使用了aj…
阅读更多...
vue中key的用法

vue中key的用法

加key是提升vue渲染效率&#xff0c;减少DOM操作。 vue列表元素的更新机制&#xff1a; 当列表元素没有设置key的时候&#xff0c;vue判断是否操作这个DOM元素&#xff0c;是根据新旧两次数据的元素顺序进行对比&#xff0c;看一下元素内容是否发生变化。发生变化vue就操作这个…
阅读更多...
2024.1.4每日一题

2024.1.4每日一题

LeetCode每日一题 2397.被列覆盖的最多行数 2397. 被列覆盖的最多行数 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个下标从 0 开始、大小为 m x n 的二进制矩阵 matrix &#xff1b;另给你一个整数 numSelect&#xff0c;表示你必须从 matrix 中选择的 不同 …
阅读更多...
Android Studio 报错Failed to find Build Tools revision 28.0.3

Android Studio 报错Failed to find Build Tools revision 28.0.3

目录 前言 一、报错信息 二、报错原因 三、解决方案 四、更多资源 前言 当Android Studio报错提示"Failed to find Build Tools revision 28.0.3"时&#xff0c;通常意味着您的项目需要使用28.0.3版本的构建工具&#xff0c;但系统中并没有找到对应的版本。这可…
阅读更多...
01第一个Mybatis程序+引入Junit+引入日志文件logback

01第一个Mybatis程序+引入Junit+引入日志文件logback

Mybatis MyBatis本质上就是对JDBC的封装&#xff0c;通过MyBatis完成CRUD。而对于JDBC&#xff0c;SQL语句写死在Java程序中&#xff0c;不灵活。改SQL的话就要改Java代码。违背开闭原则OCP。对于事务机制&#xff0c;MyBatis支持 或managed模式&#xff0c;JDBC模式中MyBatis…
阅读更多...
Spring见解 1.2

Spring见解 1.2

2.3.Spring的IOC解决程序耦合 2.3.1.创建工程 2.3.1.1.pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0"xmlns:xsi"http://www.w3.org/2001/XMLSchema-instance"xsi:sc…
阅读更多...
vue3 插槽 slot 使用

vue3 插槽 slot 使用

vue3 插槽 slot 使用 在 Vue3 中&#xff0c;插槽&#xff08;slot&#xff09;是一种重要的组件复用和内容分发机制。通过使用插槽&#xff0c;可以让组件更加灵活和具有可复用性&#xff0c;在不同的地方渲染不同的内容&#xff0c;同时保证相同的样式。 插槽资料 官网介绍&…
阅读更多...
分布式（10）

分布式（10）

目录 46.什么是Session Replication? 47.什么是Session数据集中存储&#xff1f; 48.什么是Cookie Based Session? 49.什么是JWT&#xff1f;使用JWT的流程&#xff1f;对比传统的会话有啥区别&#xff1f; 50.如何设计一个秒杀系统&#xff1f; 51.接口设计要考虑哪…
阅读更多...
地址变量与函数进阶

地址变量与函数进阶

指针与函数的高级用法 1.数组2.函数的重载3.函数的指针类型参数4.可变参数函数链表5.函数指针6.指针函数7.内联函数8.总结 在上节中我们简单谈论了指针变量&#xff0c;这节我们就来讨论指针变量的实际应用。 1.数组 相信有一定C语言基础的小伙伴一定很熟悉这个类型。数组可以…
阅读更多...
Node.js(四)-express

Node.js(四)-express

1. 初识express 1.1 express简介 1.1.1 什么是express 官方&#xff1a;Express是基于Node.js平台&#xff0c;快速、开放、极简的web开发框架。 通俗&#xff1a;Express的作用和Node.js内置的http模块类似&#xff0c;是专门用来创建web服务器的。 express的本质&#xff1…
阅读更多...
KNN 分类（选择最佳的 K 值，并可视化模型精度与 n_neighbors 的关系）

KNN 分类（选择最佳的 K 值，并可视化模型精度与 n_neighbors 的关系）

import matplotlib.pyplot as plt from sklearn.datasets import load_breast_cancer from sklearn.model_selection import train_test_split from sklearn.neighbors import KNeighborsClassifier# 导入乳腺癌数据集 cancer load_breast_cancer()# 划分训练集和测试集 X_tra…
阅读更多...
函数作用域和块级作用域

函数作用域和块级作用域

(1)Es5之前的作用域 在Es5之前只有全局作用域和函数作用域。 (1)全局作用域 范围:在winodw全局里面都生效 例子: for(var i0;i<5;i){}console.log(window.ii); 返回的结果是:True (2)函数作用域 范围:在这个函数里面生效 例子: function fn(b) {console.log(b);}con…
阅读更多...
最新文章

Copyright @ 2022~2023