自定义TabBar在基础库v2.6.2+的生命周期attached重复执行
发布于 6 年前 作者 xiazhong 7348 次浏览 来自 问答

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
            })
        }
    }
3 回复

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

问题已复现,我们看下。

有人能解决这个问题吗?

回到顶部