小程序动态加载底部导航（根据不同角色展示不同导航栏）

写法 建立在自定义底部导航基础上

分别是要用到的两种用户 不同权限的底部导航 如下（就是需要展示的两种底部导航的导航内容）

const LIST = [{
  pagePath: "/pages/home/home",
  iconPath: "/assets/imgs/yundan_icon@2x.png",
  selectedIconPath: "/assets/imgs/yundandianji_icon@2x.png",
  text: "我的运单",
  isSpecial: false
},
{
  pagePath: "/pages/goods/goods",
  iconPath: "/assets/imgs/huoyuan_icon@2x.png",
  selectedIconPath: "/assets/imgs/huoyuandianji_icon@2x.png",
  text: "专属货源",
  isSpecial: false
},
{
  pagePath: "/pages/mine/mine",
  iconPath: "/assets/imgs/me@2x.png",
  selectedIconPath: "/assets/imgs/medianji@2x.png",
  text: "我的",
  isSpecial: false
}];

const LIST1 =

[{
      pagePath: "/pages/myTask/myTask",
      iconPath: "/assets/imgs/task.png",
      selectedIconPath: "/assets/imgs/taskselect.png",
      text: "我的任务",
      isSpecial: false
    },
    {
      pagePath: "/pages/myWayBill/myWayBill",
      iconPath: "/assets/imgs/yundan_icon@2x.png",
      selectedIconPath: "/assets/imgs/yundandianji_icon@2x.png",
      text: "我的运单",
      isSpecial: false
    },
    {
      pagePath: "/pages/mine/mine",
      iconPath: "/assets/imgs/me@2x.png",
      selectedIconPath: "/assets/imgs/medianji@2x.png",
      text: "我的",
      isSpecial: false
    }];

2. ，然后要么给值为上面常量list1 要么是list 如下判断

  if (isManage) {
                app.globalData.list =   consts.LIST1;
              } else {
                app.globalData.list =  consts.LIST；
              }

测试发现 小程序组件（这里指底部导航组件）生命周期的attached 不支持操作 也就是 当想修改底部导航的内容是不支持的

所以上述写法会出现惊奇的结果 哈哈 可以自行运行看看

接着 解决思路：

先了解一下小程序组件的生命周期

[图片上传中...(image-9202b1-1629959126527-0)]

于是我使用了ready 测试发现 部分安卓机 可以操作数据 但是页面底部导航不会更新

看文档发现：

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

于是， （这里是在小程序底部导航组件里写这个方法）

  lifetimes: {
    attached () {
      console.log('-----------底部',app.globalData.list);
      this.setData({
        list: app.globalData.list
      })
      console.log('-----------底部1',this.data.list);
    }
  },

测试发现 还是没有更改过来

找资料看到

    onShow: function () {
        if (typeof this.getTabBar === 'function' &&
            this.getTabBar()) {
            this.getTabBar().setData({
                selected: 0,

               // 这次新加
                list: app.globalData.list
            })
        }
    },

即可