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

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 是新的，过了很久之后页面才被创建出来。

问题已复现，我们看下。

有人能解决这个问题吗？

回到顶部