收藏
回答

自定义TabBar在基础库v2.6.2+的生命周期attached重复执行

问题模块 框架类型 问题类型 终端类型 微信版本 基础库版本
框架 小程序 Bug 客户端 7.0.4 2.6.6

customBar代码在基础库2.6.12.5.0版本下运行,进入页面时先执行的customBar的生命周期函数attached,并打印了TarBar前缀的日志,然后在页面onShow函数中打印了进入某某页面日志,此时两个函数获取的当前页的WebViewId和TabBar的ExparserNodeId相同



然而把基础库改为2.6.2+以后,BUG来了,注意时间戳,进入页面时执行customBar的attached函数和页面的onShow函数后,再次执行了customBar的attached函数,结果就是当前页的customBar显示的是上一次渲染的数据



代码用的是你们官网提供的自定义tabbar示例代码:https://developers.weixin.qq.com/s/jiSARvmF7i55


custom-tab-bar.js


lifetimes: {
        attached() {
            var curr = app.globalData.curr;
            if (curr !== undefined) {
                this.setData({
                    list: this.data.tabs[curr]
                });
            }
 
            var webViewId = 'WebViewId: ' + this.__wxWebviewId__;
            var nxparserNodeId = 'ExparserNodeId: ' + this.__wxExparserNodeId__;
            var route = '';
            var pages = getCurrentPages();
            if (pages.length) {
                route = pages[pages.length - 1].route;
            }
            var data = JSON.stringify(this.data.list);
            console.log(Date.now(), 'TabBar', webViewId, nxparserNodeId); //, route, data);
        }
    }


角色1首页.js


onShow: function() {
        var webViewId = 'WebViewId: ' + this.__wxWebviewId__;
        var nxparserNodeId = 'ExparserNodeId: ' + this.getTabBar().__wxExparserNodeId__;
        var route = this.route;
        var data = JSON.stringify(this.getTabBar().data.list);
        console.log(Date.now(), '进入角色1首页', webViewId, nxparserNodeId); //, route, data);
        console.log(' ');
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 0
            })
        }
    }


角色2首页.js


onShow: function() {
        var webViewId = 'WebViewId: ' + this.__wxWebviewId__;
        var nxparserNodeId = 'ExparserNodeId: ' + this.getTabBar().__wxExparserNodeId__;
        var route = this.route;
        var data = JSON.stringify(this.getTabBar().data.list);
        console.log(Date.now(), '进入角色2首页', webViewId, nxparserNodeId); //, route, data);
        console.log(' ');
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: 0
            })
        }
    }



个人页.js


onShow: function() {
        var webViewId = 'WebViewId: ' + this.__wxWebviewId__;
        var nxparserNodeId = 'ExparserNodeId: ' + this.getTabBar().__wxExparserNodeId__;
        var route = this.route;
        var data = JSON.stringify(this.getTabBar().data.list);
        console.log(Date.now(), '进入角色' + (this.data.isDriver ? 1 : 2) + '个人页', webViewId, nxparserNodeId); //, route, data);
        console.log(' ');
        if (typeof this.getTabBar === 'function' && this.getTabBar()) {
            this.getTabBar().setData({
                selected: this.data.isDriver ? 1 : 2
            })
        }
    }


最后一次编辑于  04-29  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏投诉关注问题回答

6 个回答

  • LastLeaf
    LastLeaf
    05-05

    在 2.6.2+ ,我们会尝试提前为下一个页面创建一个 tabBar 实例,以便打开下一个页面能更快显示出 tabBar ,所以你会看到一个 tabBar 实例被创建,并且它的 WebviewId 是新的,过了很久之后页面才被创建出来。

    05-05
    赞同 11
    回复 2
    • 潮汐
      潮汐
      05-05

      清楚了,不过我们的业务会有2个tabbar,显示内容不同,角色2可以切换至角色1,所以如果预先生成下一个页面的tabbar实例,切换角色就会显示另外一个角色的tabbar。现在只能曲线救国,在page的onload或者onshow里去动态渲染tabbar了,不过效果不太理想,第一次加载会闪烁。。。只能把锅甩给设计了。。。

      05-05
      赞同
      回复
    • LastLeaf
      LastLeaf
      05-06回复潮汐

      有个方法:跳页面前先对预创建的 tabBar 执行 setData 。

      05-06
      赞同
      回复
  • 潮汐
    潮汐
    04-30

    有人能解决这个问题吗?

    04-30
    赞同
    回复
  • cunjinli
    cunjinli
    05-05

    问题已复现,我们看下。

    05-05
    赞同
    回复 1
    • 沈小祺
      沈小祺
      08-05
      现在是不是还没解决啊,我现在有个业务不知道该咋写了
      08-05
      赞同
      回复