收藏
回答

自定义tabBar设置底部菜单时机应该是在哪个生命周期?

请教下,如果小程序根据登录用户的类型不同,展示的底部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
            })
          }
最后一次编辑于  2020-05-22
回答关注问题邀请回答
收藏

2 个回答

  • o0o有脾气的酸奶
    o0o有脾气的酸奶
    2020-05-22

    使用的是custom-tab-bar吗

    2020-05-22
    有用
    回复 2
    • 王立建
      王立建
      2020-05-22
      是的
      2020-05-22
      回复
    • o0o有脾气的酸奶
      o0o有脾气的酸奶
      2020-05-22回复王立建
      第一次进入,tabbar闪一下,现在就是存在这个问题的
      2020-05-22
      1
      回复
  • 亮子🌞
    亮子🌞
    2020-05-22

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

    2020-05-22
    有用
    回复 1
    • 王立建
      王立建
      2020-05-22
      感谢回答!我把选中状态保存在App的globalData里面了,所以不会出现您所描述的选中问题。问题的关键在于,首次进入app,当点击tabBar菜单的时候,tabBar所对应的页面都是首次加载,从而导致切换tabBar的时候,整个tabBar都是重新获取了一次,会有闪动现象
      2020-05-22
      回复
登录 后发表内容
问题标签