微信小程序-----自定義導航欄

微信小程序------自定義導航欄

小程序有默認的tabbar，配置很簡單那，在app.json中配置即可，這裏不做闡述，我們講講自定義tabbar的配置，這能讓我們配置出更加炫酷的導航欄

配置

在app.json的"tabBar"中使用"custom": true，同時保留"list"默認的配置，最少需要保留一個pagePath和text

使用自定義組件

在小程序的根目錄創建一個自定義組件，custom-tab-bar

----  custom-tab-bar
--------  index.js
--------  index.json
--------  index.wxml
--------  index.wxss

在custom-tab-bar中我們就可以寫一個正常tab一樣來寫tabbar了，但是最少我們需要有一個基本功能點擊切換，假設有兩個tab我們就需要在index.js的data中寫上這樣的結構

tabBar: [
 {
    current: 0,
    pagePath: "/pages/A/index",
    text: "首頁",
    iconPath: "iconPath",
    selectedIconPath: "iconPath_active.png"
  },
  {
    current: 0,
    pagePath: "/pages/B/index",
    text: "定製",
    iconPath: "iconPath",
    selectedIconPath: "iconPath_active.png"
  },
]

這樣的結構基本可以支持我們做簡單的切換效果，我們再加一個基本的切換事件

goToTab: function(e) {
  var url = e.currentTarget.dataset.url;
  wx.switchTab({
    url: url
  });
}

這樣就可以點擊切換了，我們設置了組件裏面的配置，至於wxml裏面我們可以隨便怎麼寫，只要是一個tabbar條就行，可以看到是通過current來判斷的，

使用

在我們的一級tabbar頁面，只需要在index.js裏面判斷是否點擊到當前頁面就可以，一般在onshow函數中

onShow: function() {
	if (typeof this.getTabBar === "function" && this.getTabBar()) {
	 let tabbar = this.getTabBar().data.tabBar;
	  tabbar[0].current = 1;      //數字[index]是當前頁面在tabbar的索引
	  this.getTabBar().setData({
	    tabBar: tabbar
	  });
	}
}

這樣，如果我們前面配置了圖標切換，就可以識別了

這只是最基本的自定義，想要怎麼添加效果，儘可以腦洞大開