在一个微信小程序中想要用到两种不同的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.jsApp({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
