小程序动态tabBar菜单,根据条件渲染不同的tabBar

3,469 阅读2分钟

前言

这次的项目需求是用户存在两种身份,普通用户和师傅用户,那么要根据不同的身份展示不同的tabBar菜单,看了下官方文档,难度不大,但是由于我用的框架是Taro,用官方文档的方法试了几次wxApi调不通就放弃了,转为JS通用大法写,但是配置方面还是得按照小程序文档来。

做成效果

用户菜单 师傅菜单

说明

此文是Taro版,非原生,思路可供参考,毕竟JS是互通的。

1. 配置信息

  • 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。 由于Taro没有单目录json,所以只配了第一条就生效了
  tabBar: {
      custom: true,
      list: [{
        'pagePath': 'pages/home/index',
        'text': '首页',
      }, ...]
    },

2. 添加 tabBar 代码文件

  • 在代码根目录下添加入口文件:
  custom-tab-bar/index.js

此文件编写的组件会作为自定义的tabBar展示出来

主要步骤

  1. custom-tab-bar/index.js里编写组件(此组件即是新的tabBar组件)
  2. 比如用户端有4个菜单,师傅端有3个菜单,这里我做好了标识type区分身份
const nav = [{
      'url': '/pages/home/index',
      'type': 1,
      'text': '首页',
    }, {
      'url': '/pages/user1/index',
      'type': 1,
      'text': '用户菜单1'
    }, {
      'url': '/pages/user2/index',
      'type': 1,
      'text': '用户菜单2'
    }, {
      'url': '/pages/user3/index',
      'type': 1,
      'text': '用户菜单3'
    }, {
      'url': '/pages/masterhome/index',
      'type': 2,
      'text': '师傅首页'
    }, {
      'url': '/pages/master1/index',
      'type': 2,
      'text': '师傅菜单1'
    }, {
      'url': '/pages/master2/index',
      'type': 2,
      'text': '师傅菜单2'
    }]
  1. 登录后拿到后端返回的身份信息,这里定义一个变量isMaster存储起来
  2. 然后在 custom-tab-bar/index.js里拿到isMaster,根据isMaster处理得到navList来渲染需要对应的tabBar 列表
  const navList = isMaster ? nav.filter(item => item.type === 2) : data.filter(item => item.type === 1);
  1. 当isMaster 为true 时,tabBar显示 师傅菜单

  2. 当isMaster 为false 时,tabBar显示 用户菜单

觉得还不错记得点个赞,与君加油