## 1.关于自定义导航栏切换闪烁问题 自定义导航栏，在app和小程序端，切换的时候，导航或页面会闪烁一下，客户体验不佳。 解决思路： **1、使用uniapp的原生导航，在 pages.json 配置文件里，用以下配置替换原来的 tabBar 配置。需要的端使用条件编译判断**。 ~~~scss "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": "我的" } ] }, ~~~ 2、使用uniapp 的原生导航，即在思路1的基础上，调用api`uni.setTabBarItem`重设导航。 更多详细的配置参数见：https://uniapp.dcloud.io/api/ui/tabbar 在 APP.vue 的 onShow 方法里，加上以下配置 ~~~javascript // #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 ~~~ 注意事项说明： > *\**`目前的 uniapp前端 源码在app端使用的是第二种方法`。代码见`pages.json`和`app.vue`两个文件，使用条件编译区分了。当你需要修改为第一种方案时，比如微信小程序，那需要在`pages.json`加上条件编译`|| MP-WEIXIN`和`\addons\cms\uniapp\components\fa-tabbar\fa-tabbar.vue`这个文件的条件编译也加上`|| MP-WEIXIN`即可!其实就是配置原生的tabbar，去掉自定义的tabbar > ***若使用自定义导航，把pages.json的tabBar配置和app.vue里的APP端的条件编辑以及`\addons\cms\uniapp\components\fa-tabbar\fa-tabbar.vue`的APP的条件编译代码移除即可。*** > > > 如使用思路2，重设的导航，想增加或删除一个导航，需要更改两个地方， > (一)、在pages.json里的tabbar新增或删除。 > (二)、在后台的移动端样式管理，也需要新增或删除即可。