公告列表
公告列表
收藏
回答

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

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

回答关注问题邀请回答
收藏

7 个回答

  • 威
    威
    2019-10-14

    遇到相同问题,同求

    2019-10-14
    有用 1
    回复
  • .
    .
    2019-09-07

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

    2019-09-07
    有用 1
    回复
  • 明神月
    明神月
    2019-12-11

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

    2019-12-11
    有用
    回复
  • 阿巴阿巴
    阿巴阿巴
    2019-08-19

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

    2019-08-19
    有用
    回复
  • 木子目分
    木子目分
    2019-08-13

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

    2019-08-13
    有用
    回复
  • 一路向西
    一路向西
    2019-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会被执行两次，然后导航栏会闪一下

    2019-07-31
    有用
    回复 2
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-07-31

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

    2019-07-31
    有用
    回复
请 登录 后发表内容
相关问题
相关文档