小程序自定义tabbar到任意页面

很多时候不是tabbar的页面也需要加上tabbar导航所以我们需要去自定义它～
（1）打开小程序官方文档

按照图片中的箭头找到按需下载 选择里面的tabbar下载下来放入我们小程序的项目中
（2）在需要自定义tabbar的页面json中引入我们下载好的weui

{
  "usingComponents": {
    "mp-tabbar": "../../weui/tabbar/tabbar"
  }
}

（3）在wxml中引入

<mp-tabbar style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="handelChange"></mp-tabbar>

（4）在js中定义一个list字段

 
    data:{
    /*list的内容就是app.json中tabBar中list的内容*/
		list: [
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      },
      {
        "pagePath": "",
        "text": "",
        "iconPath": "",
        "selectedIconPath": ""
      }
    ]
}
/*点击tabbar时跳转页面*/
  handelChange(e) {
    console.log('tab change', e)
    wx.switchTab({
      url: e.detail.item.pagePath,
    })
  },

这样就可以啦！