微信小程序使用weui自定义底部导航栏，切换不同页面显示不同tabbar

在一个微信小程序中想要用到两种不同的tabbar样式，可以使用微信小程序自带插件tabbar

首先在页面json文件中引入 tabbar

{
  "navigationBarTitleText": "个人中心",
  "usingComponents": {
    "mp-tabbar": "/miniprogram_npm/weui-miniprogram/tabbar/tabbar"
  }
}

在wxml文件中使用mp-tabbar，list代表的是显示的列表（文字、图标），current是当前显示的tab，ext-class可以自定义样式

<mp-tabbar ext-class="foot-tabbar" style="position:fixed;bottom:0;width:100%;left:0;right:0;" list="{{list}}" bindchange="tabChange" current="1"></mp-tabbar>

tabbar的列表和事件可以封装到app.js中，在页面中直接引入就好，不用每次使用都要定义

app.js

// app.js
App({
  globalData: {
    indexTabBarLists: [{
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "/image/common/home_normal_icon.png",
      "selectedIconPath": "/image/common/home_hover_icon.png"
      // dot: true
    },
    {
      "pagePath": "/pages/mine/mine",
      "text": "我的",
      "iconPath": "/image/common/home_mine_normal_icon.png",
      "selectedIconPath": "/image/common/home_mine_hover_icon.png"
      // badge: 'New'
    }
    ], // tabbar数据
    indexTabBarLists0: [{
      "pagePath": "/pages/index/index",
      "text": "首页",
      "iconPath": "/image/common/home_normal_icon.png",
      "selectedIconPath": "/image/common/home_hover_icon.png"
      // dot: true
    },
    {
      "pagePath": "/PersonalCenter/pages/PersonalCenter/PersonalCenter",
      "text": "我的",
      "iconPath": "/image/common/home_mine_normal_icon.png",
      "selectedIconPath": "/image/common/home_mine_hover_icon.png"
      // badge: 'New'
    }
    ] // tabbar数据
  },
  tabChange: function(e) {
    wx.redirectTo({
      url: e.detail.item.pagePath
    })
  }
})

在页面js中引入封装的list和事件

Page({

  /**
   * 页面的初始数据
   */
  data: {
    list: getApp().globalData.indexTabBarLists0, // tabbar数据
  },

  tabChange(e) {
    getApp().tabChange(e);
  },
}）

不同页面都能显示不同的tabbar