WXOPEN Club

自定义底部导航栏，第一次点击导航按钮时导航会闪烁一下，如何解决？

发布于 7 年前作者 pingdai5547 次浏览最后编辑 7 年前来自 issues

在自定义custom-tab-bar时，当编译之后，第一次点击切换tab时，tabbar会闪烁。给tabbar添加ready方法，发现第一次点击导航按钮时ready会被执行两次，从而导致tabbar闪烁，这应该如何解决？

7 回复
qinna
qinna1 楼6 年前

请问问题解决了吗？我也遇到这个问题，不仅闪烁，底部导航点击响应还慢

hdu
hdu2 楼6 年前

请问问题解决吗，我也遇到这个问题了

ming17
ming173 楼6 年前

此问题的主要根源在于一开始初始化进来并没有初始化好自定义的tabBar,当第一次点击tabBar 时才去初始化，这样导致出现的点击第一次回闪一下，官方能否在页面初始化时将tabBar初始化好呢

taoming
taoming4 楼6 年前

你好，麻烦提供出现问题的具体机型、微信版本号、系统版本号，以及能复现问题的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）

liguo
liguo5 楼6 年前

遇到相同问题,同求

eqiao
eqiao6 楼6 年前

请问这个问题解决了吗？我也遇到这个问题，自定义底部导航，点击切换底部导航会闪烁，但是四个底部导航依次点击一次之后就不会再闪烁了，请官方给出解决方案，Thanks♪(･ω･)ﾉ

gang94
gang947 楼5 年前

这个是custom-tab-bar，里面的index文件

import tabBarData from '../config/tabBarData.js';
import style from '../config/style.js';
Component({
    data: {
        selected: 0,
        backgroundColor: "#ffffff",
        borderColor: "#efefef",
        color: style.textColor,
        selectedColor: style.mainColor,
        list: [
            {
                pagePath: "/index/text1/text1",
                text: "text1",
                iconPath: "/icons/news.png",
                selectedIconPath: "/icons/news_active.png"
            },
            {
                pagePath: "/index/text2/text2",
                text: "text2",
                iconPath: "/icons/sport.png",
                selectedIconPath: "/icons/sport_active.png"
            },
            {
                pagePath: "/index/text3/text3",
                text: "text3",
                iconPath: "/icons/target.png",
                selectedIconPath: "/icons/target_active.png"
            }
        ]
    },
    attached() { },
    ready: function(){
        console.log('ready');
    },
    methods: {
        switchTab(e) {
            const data = e.currentTarget.dataset;
            this.setData({
                selected: data.index
            })
            wx.switchTab({
                url: data.path
            });
        },
        setTabBarItem(obj) {
            let list = this.data.list;
            let index = obj.index;
            delete obj.index;           
            list[index] = Object.assign({},list[index],obj);
            this.setData({
                list: list
            });
        }
    }
})

这个是页面里面的js文件

Page({

   onLoad: function(options) {

        if (typeof this.getTabBar === 'function' &&
            this.getTabBar()) {
            this.getTabBar().setData({
                selected: 2
            })
        }
    }
})

页面编译之后，第一次点击tabBar，tabBar里面的ready会被执行两次，然后导航栏会闪一下