微信小程序自定义tabBar

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

模拟的tabBar页面（不推荐）

使用策略

• app.json不配置tabBar，用普通page来代替tabbar页面，暂且称之为模拟的tabbar页面。

  

• 每个模拟的tabbar页面都需要引入自定义tabbar组件。

1. 自定义的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`,
      })
    }
  }
})

2. 模拟的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控制。

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

/pages/home/index.json

{
  "component": true
}

/pages/home/index.wxml

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

/pages/home/index.js

Component({})

2. 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)
    }
  }
})

2. 入口页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
    })
  }
})

效果如下：

总结

由于是通过wx:if控制组件的创建和销毁，是局部更新，所以不会导致底部tabbar的重新渲染，所以底部闪一下的问题就解决了。缺点我想是如果频繁切换tab可能导致wx:if的渲染开销大吧。

官方自定义tabBar

官方也提供了自定义tabbar的方法，见自定义 tabBar。

基础库 2.5.0 开始支持，低版本需做兼容处理。

首发链接