## 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新增或刪除。 > (二)、在后臺的移動端樣式管理，也需要新增或刪除即可。