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 }) } } |
在 2.6.2+ ，我们会尝试提前为下一个页面创建一个 tabBar 实例，以便打开下一个页面能更快显示出 tabBar ，所以你会看到一个 tabBar 实例被创建，并且它的 WebviewId 是新的，过了很久之后页面才被创建出来。
清楚了，不过我们的业务会有2个tabbar，显示内容不同，角色2可以切换至角色1，所以如果预先生成下一个页面的tabbar实例，切换角色就会显示另外一个角色的tabbar。现在只能曲线救国，在page的onload或者onshow里去动态渲染tabbar了，不过效果不太理想，第一次加载会闪烁。。。只能把锅甩给设计了。。。
有个方法：跳页面前先对预创建的 tabBar 执行 setData 。
我碰到了和楼主一样的需求，僵住了一上午。在开发者工具和真机调试时均不会出现这样的问题。
看了官方的解释和解决思路，我的解决办法如下：
在自定义tabbar的attached周期里，将预创建的实例挂到app的globalData中，这样在其他页面就能获取到这个预创建的实例。当切换角色后，跳页面之前，通过setData修改tabbar的配置项为切换后角色的，这样切换后就能正确渲染当前角色的tabbar了。
问题已复现，我们看下。
有人能解决这个问题吗？