【uniapp開發微信小程序】自定義底部導航欄

　　由於業務需要，開發的微信小程序需要動態加載底部的導航欄，根據不同角色顯示對應的導航。因此，小程序的開發就不能用原生的導航欄。在這里我用了uniapp使用頻率比較高的框架（colorUI）。實現動態加載的組件很多，可以自行到uniapp的插件市場尋找，colorui也有對應的模塊，不過我使用的是（ADTabbar）這款插件，並且修改了他的插件。

　　簡述一下實現動態生成導航欄的原理（個人拙見，不對的歡迎指正）：

　　1.index.vue這個頁面作為母頁面，其他的導航欄頁面以組件的形式導入到這個頁面中。

　　2.定義一個導航欄組件，（參考上述的ADTTabbar或者colorui自帶的）。為組件的每個導航設置同一個click事件。記住，每一個導航都要做好命名，在click 事件里，需要根據這些命名來顯示不同的導航欄頁面。

　　3.對頁面組件可以選擇用if條件來判斷加載的組件或者根據css來判斷顯示的組件。

　　　　注意：if是通過渲染來加載滿足條件的組件，而css則會加載所有組件，然后顯示滿足條件的組件。個人推薦通過if的形式，這樣一次只渲染我們想要的組件。還有需要注意的是，當我們以組件的形式顯示頁面時，頁面的生命周期函數會失效。臨時解決的方式我給個參考：在各個頁面定義一個方法，在index頁面里，點擊導航欄時觸發一個自己寫的方法，這個方法使用ref去調用各個頁面模擬的生命周期函數。

// 導航欄切換
navClick: function(e) { 
    this.curPage = e.currentTarget.dataset.cur //保存當前頁面的名字
    if(this.curPage=='a'){  
        this.$nextTick(function(){
            this.$refs.a.load()
        })
    }else if(this.curPage =='b'){
        this.$nextTick(function(){
            this.$refs.b.load()
            })
    } 
},

　　上述方法並未最好的解決方法，貌似是使用mixins更好，不過具體的我也記不清楚了，我之后會跟朋友討論一下有什么解決方案，大神看了話，希望不吝賜教。

　　對了，在這些導航頁面進行頁面跳轉時，切記跳轉的路徑要從index.vue開始，（導航欄頁面組件或者導航欄頁面組件中有子組件可能會用到跳轉）因為頁面組件是組件，不能跟頁面一樣的進行跳轉，所以uniapp是以index.vue這個頁面作為當前頁面。