自定义tabBar设置底部菜单时机应该是在哪个生命周期?
发布于 5 年前 作者 nayang 1562 次浏览 来自 问答

请教下,如果小程序根据登录用户的类型不同,展示的底部tabBar菜单是不同的,那么设置底部菜单的操作应该是在哪一步设置比较合理呢?我是在自定义tabBar组件的attached钩子函数进行设置,会发现首次进入小程序,底部导航对应加载的时候,tabBar都会自动加载,导致的问题,就是底部菜单会出现闪动现象,个人感觉导致这个问题的原因是 tabBar所在页面首次加载都会触发tabBar组件的attached钩子函数,那么要避免这种闪动现象,设置底部菜单的时机是什么时候呢以及具体如何操作,请各位大佬给点儿指示

以下为tabBar组件模拟动态设置底部菜单代码片段

data: {
    selected: 0,
    color: "#7A7E83",
    selectedColor: "rgb(63, 201, 205)",
    list: [
      {
        pagePath: "/pages/index/index",
        key: 0,
        iconPath: "/assets/images/tab_home.png",
        selectedIconPath: "/assets/images/tab_home_pre.png",
        text: "首页"
      },
      {
        pagePath: "/pages/mine/mine",
        key: 2,
        iconPath: "/assets/images/tab_my.png",
        selectedIconPath: "/assets/images/tab_my_pre.png",
        text: "我的"
      }
    ]
  },
lifetimes: {
    attached () {
        
      if ([1, 2].includes(this.data.accountType) && this.data.list.length == 2) {
        // 管理员、子账号
        let list = this.data.list
        list.splice(1, 1, {
          pagePath: "/pages/adt/adminBack/adminBack",
          iconPath: "/assets/images/tab_bill.png",
          selectedIconPath: "/assets/images/tab_bill_pre.png",
          text: "账单",
          key: 1
        }, list[1])
        this.setData({
          list: list
        })
      } else if (this.data.accountType == 3) {
        setTimeout(() => {
          let showAccount = true
          
          if (showAccount && this.data.list.length == 2) {
            let list = this.data.list
            list.splice(1, 1, {
              pagePath: "/pages/adt/adminBack/adminBack",
              iconPath: "/assets/images/tab_bill.png",
              selectedIconPath: "/assets/images/tab_bill_pre.png",
              text: "账单",
              key: 1
            }, list[1])
            this.setData({
              list: list
            })
          }
2 回复

使用的是custom-tab-bar吗

首先我理解你的select这个属于默认选中哪个吧 这个最好设置成-1 否则会出现从0又变到当前页面 在页面的onShow里面去改变 自定义tab的原理是 每个页面引入了一个自定义组件tab 所以刚进去页面的时候 tab是初始状态在onShow里面改变当前组件的<span style="font-size: 14px;">select选中下标</span>
回到顶部