收藏
回答

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

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

最后一次编辑于  07-30  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

5 个回答

  • 娇华
    娇华
    07-31

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

    07-31
    赞同
    回复
  • 。。。
    。。。
    07-31

    这个是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会被执行两次,然后导航栏会闪一下

    07-31
    赞同
    回复 2
  • 木子目分
    木子目分
    星期二 19:07

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

    星期二 19:07
    赞同
    回复