本文分享一下微信小程序自定义tabBar的几种实现方式。

模拟的tabBar页面（不推荐）

使用策略

app.json不配置tabBar，用普通page来代替tabbar页面，暂且称之为模拟的tabbar页面。
每个模拟的tabbar页面都需要引入自定义tabbar组件。

自定义的tabbar组件写法如下：

/components/index-tabbar/index.json

{  "component": true,  "usingComponents": {    "van-tabbar": "vant-weapp/tabbar/index",    "van-tabbar-item": "vant-weapp/tabbar-item/index"  }}

/components/index-tabbar/index.wxml

<cover-view class="container">  <van-tabbar active="{{ active }}" bind:change="onChange">    <van-tabbar-item name="index" icon="home-o">首页</van-tabbar-item>    <van-tabbar-item name="category" icon="label-o">分类</van-tabbar-item>    <van-tabbar-item name="msgs" icon="comment-o">留言</van-tabbar-item>    <van-tabbar-item name="my" icon="user-o">我的</van-tabbar-item>  </van-tabbar></cover-view>

/components/index-tabbar/index.js

Component({  properties: {    active: {      type: String,      value: 'index'    },  },  methods: {    onChange(event) {      wx.redirectTo({        url: `/pages/${event.detail}/index`,      })    }  }})

模拟的tabbar页面写法如下：

/pages/home/index.json

{  "usingComponents": {    "index-tabbar": "/components/index-tabbar/index"  }}

/pages/home/index.wxml

<view class="container">  <text>首页</text>  <index-tabbar active="index"></index-tabbar></view>

跳转页面使用wx.redirectTo

总结

由于wx.redirectTo跳转页面是跳转的普通页面，页面渲染也自然会导致自定义的tabbar组件重新渲染，所以会出现底部tabbar闪一下的视觉体验，很尴尬。

Component伪装Page（还不错）

使用策略

将上述4个模拟的tabBar页面换成组件写法，然后根据条件进行wx:if控制。

改造首页，分类，留言，我的，将其由页面改为组件

/pages/home/index.json

{  "component": true}

/pages/home/index.wxml

<view>  <text>首页</text></view>

/pages/home/index.js

Component({})

index-tabbar组件改造

/components/index-tabbar/index.wxml

<cover-view class="container">  <van-tabbar active="{{ active }}" bind:change="onChange">    <van-tabbar-item      wx:for="{{panels}}"      wx:for-index="index"      wx:for-item="item"      wx:key="{{index}}"      name="{{item.name}}"      icon="{{item.icon}}"      info="{{item.badge}}">      {{item.label}}    </van-tabbar-item>  </van-tabbar></cover-view>

/components/index-tabbar/index.js

Component({  properties: {    active: {      type: String,      value: 'home'    },    panels: {      type: Array,      value: []    },  },  methods: {    onChange(event) {      this.triggerEvent('changeTab', event.detail)    }  }})

入口页index改写成如下

/pages/index/index.json

{  "usingComponents": {    "index-tabbar": "/components/index-tabbar/index",    "home-panel": "../home/index",    "category-panel": "../category/index",    "msgs-panel": "../msgs/index",    "my-panel": "../my/index"  }}

/pages/index/index.wxml

<view class="container">  <home-panel wx:if="{{activeTab == 'home'}}">首页</home-panel>  <category-panel wx:if="{{activeTab == 'category'}}">分类</category-panel>  <msgs-panel wx:if="{{activeTab == 'msgs'}}">留言</msgs-panel>  <my-panel wx:if="{{activeTab == 'my'}}">我的</my-panel>  <index-tabbar active="{{activeTab}}" panels="{{panels}}" bind:changeTab="onTabChange"></index-tabbar></view>

/pages/index/index.js

Page({  data: {    activeTab: 'home',    panels: [      { name: 'home', icon: 'home-o', label: '首页' },      { name: 'category', icon: 'label-o', badge: '5', label: '分类' },      { name: 'msgs', icon: 'comment-o', badge: '99+', label: '留言' },      { name: 'my', icon: 'user-o', label: '我的' }    ]  },  onTabChange(event) {    this.setData({      activeTab: event.detail    })  }})