1.关于自定义导航栏切换闪烁问题

自定义导航栏,在app和小程序端,切换的时候,导航或页面会闪烁一下,客户体验不佳。
解决思路:
1、使用uniapp的原生导航,在 pages.json 配置文件里,用以下配置替换原来的 tabBar 配置。需要的端使用条件编译判断

QAuPcSFgJoCiIyhE5fEKjbwY4Tt1FBfijnUrYQ==著作权归作者所有,未经许可,禁止转载、复制此文档的任何内容。
"tabBar": {
        "color": "#999",
        "selectedColor": "#000",
        "backgroundColor": "#FFFFFF",
        "borderStyle": "white",
        "list":[{
                "pagePath": "pages/index/index",
                "iconPath": "static/tabbar/home.png",
                "selectedIconPath": "static/tabbar/home-hl.png",
                "text": "首页"
            },
            {
                "pagePath": "pages/article/article",
                "iconPath": "static/tabbar/article.png",
                "selectedIconPath": "static/tabbar/article-hl.png",
                "text": "资讯"
            },
            {
                "pagePath": "pages/product/product",
                "iconPath": "static/tabbar/image.png",
                "selectedIconPath": "static/tabbar/image-hl.png",
                "text": "产品"
            },
            {
                "pagePath": "pages/index/my",
                "iconPath": "static/tabbar/my.png",
                "selectedIconPath": "static/tabbar/my-hl.png",
                "text": "我的"
            }
        ]
    },
cNHqgktIVlpQPxzeYG0kBaGiHX4wuU39rjvWLw==著作权归作者所有,未经许可,禁止转载、复制此文档的任何内容。

2、使用uniapp 的原生导航,即在思路1的基础上,调用api uni.setTabBarItem重设导航。
更多详细的配置参数见:https://uniapp.dcloud.io/api/ui/tabbar
在 APP.vue 的 onShow 方法里,加上以下配置

WKDuqGgBmvaYVjdfxhmHu+oX1hP0tzRqTgy47w==著作权归作者所有,未经许可,禁止转载、复制此文档的任何内容。
    // #ifdef APP-PLUS        
        let tabbar = this.vuex_config.tabbar;
        if(!tabbar){
            this.$util.setTabbar(this.vuex_tabbar);
            return;
        }
        let num = 0;
        for (let i in tabbar.list) {            
            try{
                let imagepath = await this.$util.image_cache(tabbar.list[i].image);
                let selectedImage = await this.$util.image_cache(tabbar.list[i].selectedImage);
                tabbar.list[i].image = imagepath;
                tabbar.list[i].selectedImage = selectedImage;
                num = i;
            }catch(e){
                console.log(e)
            }            
        }        
        //全部下载成功使用服务器的导航,否则启用本地备用导航
        if((parseInt(num)+1) == tabbar.list.length){
            this.$util.setTabbar(tabbar);            
        }else{
            this.$util.setTabbar(this.vuex_tabbar);
        }
        // #endif
LlXaYrDcSQWdujIsD8PBWEblOAux9Z5+jEyt7A==著作权归作者所有,未经许可,禁止转载、复制此文档的任何内容。

温馨提示

eiHYuNhSdvwspMbcZnt2a2kdRVYUsx4XgSNBEw==著作权归作者所有,未经许可,禁止转载、复制此文档的任何内容。
目前的 uniapp前端 源码在app端使用的是第二种方法。代码见 pages.jsonapp.vue 两个文件,使用条件编译区分了。当你需要修改为第一种方案时,比如微信小程序,那需要在pages.json加上条件编译 || MP-WEIXINuniapp\components\fa-tabbar\fa-tabbar.vue这个文件的条件编译也加上|| MP-WEIXIN 即可!其实就是配置原生的tabbar,去掉自定义的tabbar
文档最后更新时间:2025-04-01 10:04:28
著作权归应用插件开发者所有,未经许可,禁止转载、复制此文档的任何内容。

文档
目录

深色
模式

切换
宽度