公告列表
公告列表
收藏
回答

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

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

customBar代码在基础库2.6.1和2.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
            })
        }
    }


https://developers.weixin.qq.com/s/q9xOsZmx7z7h
最后一次编辑于  2019-04-29
回答关注问题邀请回答
收藏
0个关联Issue

4 个回答

  • LastLeaf
    LastLeaf
    2019-05-05

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

    2019-05-05
    有用 2
    回复 2
    • 2019-05-05

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

      2019-05-05
      赞
      回复
    • LastLeaf
      LastLeaf
      2019-05-06回复

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

      2019-05-06
      赞
      回复
  • 天涯海角
    天涯海角
    2021-10-11

    我碰到了和楼主一样的需求，僵住了一上午。在开发者工具和真机调试时均不会出现这样的问题。

    看了官方的解释和解决思路，我的解决办法如下：

    在自定义tabbar的attached周期里，将预创建的实例挂到app的globalData中，这样在其他页面就能获取到这个预创建的实例。当切换角色后，跳页面之前，通过setData修改tabbar的配置项为切换后角色的，这样切换后就能正确渲染当前角色的tabbar了。

    2021-10-11
    有用
    回复
  • 视频号小店技术助手 - cunjin
    视频号小店技术助手 - cunjin
    2019-05-05

    问题已复现，我们看下。

    2019-05-05
    有用
    回复 2
    • 沈小祺
      沈小祺
      2019-08-05
      现在是不是还没解决啊，我现在有个业务不知道该咋写了
      2019-08-05
      赞
      回复
    • 微光
      微光
      2019-10-21
      这个问题已经修复了吗？我的还是会执行多次啊
      2019-10-21
      赞
      回复
  • 2019-04-30

    有人能解决这个问题吗？

    2019-04-30
    有用
    回复
请 登录 后发表内容
相关问题
相关文档