微信小程序-----自定义导航栏

微信小程序------自定义导航栏

小程序有默认的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
	  });
	}
}

这样，如果我们前面配置了图标切换，就可以识别了

这只是最基本的自定义，想要怎么添加效果，尽可以脑洞大开