收藏
回答

小程序自定义tabbar动态更新数据不起效?

通过小程序自定义tabbar的文档https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html的方法,自定义的tabbar已经显示

data: {
    selected: 0,
    list:[],
},
lifetimes:{
    attached() {
        ...
        //动态获取list数据
        ...
        this.setData({list});// 无效
      },
  },

首次进来,tabbar能正常显示,但动态获取到tabbar的数据list之后,通过setData发现变化了,UI没更新,求解答???????

回答关注问题邀请回答
收藏

8 个回答

  • benlampson
    benlampson
    2020-12-05

    我这里瞅着也没解决啊...

    2020-12-05
    有用 1
    回复
  • 有冷风轻吹过
    有冷风轻吹过
    2023-11-20

    官方说的很清楚了所以状态肯定无法在每个实例之间共享,把状态提升到全局,tabbar组件生命周期中同步下全局的状态就行了吧。


    2023-11-20
    有用
    回复
  • Drake
    Drake
    2022-09-16

    我这里也是ios不行,安卓和开发者工具都没问题,最后是加了700ms的延时配合 @汤加米 的办法在页面生命周期里面用 `this.getTabbar().setData({..})` 才解决的

    2022-09-16
    有用
    回复
  • 抬头45度
    抬头45度
    2021-02-07

    请问解决了吗,我也碰到同样的问题,动态加载list,改变list的值页面不更新,但是打印的值是改过来了

    2021-02-07
    有用
    回复 1
  • 汤加米
    汤加米
    2020-12-23

    今天试了一个方法希望可以帮到你

    我的权限控制值是在登录接口获取的

    在app.js里设置了一个全局变量(比如说isShowSth:false)

    然后在登录进去后默认显示的page里onShow事件中调用
    if (typeof this.getTabBar === 'function' &&
            this.getTabBar()) {
            this.getTabBar().setData({
              isShow: app.globalData.isShow
            })
        }
    以上可以实现根据权限动态显示隐藏tabbar
    
    2020-12-23
    有用
    回复 1
    • 我要在床上玩一会手机
      我要在床上玩一会手机
      2021-06-04
      谢谢老哥,我放在custom-tab-bar的ready周期里去了,没有触发视图更新,放到page里就好了
      2021-06-04
      2
      回复
  • 糖水妹
    糖水妹
    2020-10-13

    每个页面的tabbar实例都独立的吧

    2020-10-13
    有用
    回复
  • Harry🐼🐼
    Harry🐼🐼
    2020-09-25

    我也遇到了,无法动态setData

    2020-09-25
    有用
    回复 2
    • Calvin
      Calvin
      2020-10-15
      微信小程序助手示例的demo可以解决
      2020-10-15
      回复
    • 会飞的蜗牛
      会飞的蜗牛
      2020-12-23回复Calvin
      您好,麻烦问下您这个问题解决了吗?是怎么解决的?~~我看微信demo不是异步获取的 一旦异步就不会自动刷新
      2020-12-23
      回复
  • Cjiang
    Cjiang
    2020-06-19

    请提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2020-06-19
    有用
    回复 8
    • Calvin
      Calvin
      2020-06-19
      tabbar有缓存,更新数据后,如果一段时间后再打开,tabbar会刷新,立马setData,不会马上生效
      2020-06-19
      回复
    • Calvin
      Calvin
      2020-06-19
      就是在官网的这个demo的基础上https://developers.weixin.qq.com/miniprogram/dev/framework/ability/custom-tabbar.html


      Component({
        data: {
          selected: 0,
          color: "#7A7E83",
          selectedColor: "#3cc51f",
          list: [{
            pagePath: "/index/index",
            iconPath: "/image/icon_component.png",
            selectedIconPath: "/image/icon_component_HL.png",
            text: "组件"
          }, {
            pagePath: "/index/index2",
            iconPath: "/image/icon_API.png",
            selectedIconPath: "/image/icon_API_HL.png",
            text: "接口"
          }]
        },
        attached() {
          let that = this;
          let list = [];
          wx.request({
            url: 'api地址',
            header: {
              'content-type': 'application/json' // 默认值
            },
            success (res) {
              that.data({list:res.data});
            }
          });
        },
        pageLifetimes:{
          show(){debugger
            console.log("show");
          }
        },
        methods: {
          switchTab(e) {
            const data = e.currentTarget.dataset
            const url = data.path
            wx.switchTab({url})
          }
        }
      })
      2020-06-19
      回复
    • Cjiang
      Cjiang
      2020-06-19回复Calvin
      提供下简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。
      2020-06-19
      回复
    • 刘聪
      刘聪
      2020-07-31回复Calvin
      现在解决了吗?
      2020-07-31
      回复
    • 我要在床上玩一会手机
      我要在床上玩一会手机
      2021-06-04回复Cjiang
      这个问题依然存在,请问如何解决。当自定义tabbar里的内容需要根据数据动态显示的时候,便会出现此问题。数据的改变无法触发视图的更新,真的用的难受....
      2021-06-04
      回复
    查看更多(3)
登录 后发表内容
问题标签