微信小程序自定义Tabbar

官方文档：自定义 tabBar

基础配置

首先需要在app.json中设置自定义tabbar

然后在项目根目录新建custom-tab-bar文件夹，以组件的形式在该文件夹下新建文件，文件名index

在app.json文件的page配置项中新增custom-tab-bar文件路径

到这里自定义tabbar的前期配置已经完成。
然后使用vant的自定义tabbar

<!--custom-tab-bar/index.wxml-->
<view>
  <van-tabbar active="{{ active }}" bind:change="onChange" active-color="#4F7EC4" inactive-color="#9DA5AE" placeholder>
    <van-tabbar-item icon="home-o">标签</van-tabbar-item>
    <van-tabbar-item icon="search">标签</van-tabbar-item>
    <van-tabbar-item icon="friends-o">标签</van-tabbar-item>
    <van-tabbar-item icon="setting-o">标签</van-tabbar-item>
  </van-tabbar>
</view>

// custom-tab-bar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    active: 0,
  },

  /**
   * 组件的方法列表
   */
  methods: {
    onChange(event) {
      // event.detail 的值为当前选中项的索引
      this.setData({ active: event.detail });
    },
  }
})

// custom-tab-bar/index.json
{
  "component": true,
  "usingComponents": {
    "van-tabbar": "@vant/weapp/tabbar/index",
    "van-tabbar-item": "@vant/weapp/tabbar-item/index",
    "van-image": "@vant/weapp/image/index"
  }
}

页面效果：

这是一个最基础的tabbar设置，tabbar有一个onChange事件，可以在该事件中设置激活的tabbar

onChange(event) {
  // event.detail 的值为当前选中项的索引
  this.setData({ active: event.detail });
},

自定义配置

我们会在基础配置的基础上做自定义配置，例如在tabbar上添加小图标，例如茶颜悦色：

我们可以将tabbar做成动态渲染的模式，通过wx:for遍历渲染数据

// custom-tab-bar/data.js
export const TAB_LIST = [
  {
    "pagePath": "/pages/index/index",
    "text": "首页",
    "iconPath": "/assets/tabbar/home.png",
    "selectedIconPath": "/assets/tabbar/home (1).png"
  },
  {
    "pagePath": "/pages/goods/index",
    "text": "商城",
    "iconPath": "/assets/tabbar/qr_code.png",
    "selectedIconPath": "/assets/tabbar/qr_code (1).png"
  },
  {
    "pagePath": "/pages/car/index",
    "text": "购物车",
    "iconPath": "/assets/tabbar/cart.png",
    "selectedIconPath": "/assets/tabbar/cart (1).png",
  },
  {
    "pagePath": "/pages/my/index",
    "text": "我的",
    "iconPath": "/assets/tabbar/people.png",
    "selectedIconPath": "/assets/tabbar/people (1).png"
  }
]

// custom-tab-bar/index.js
import { TAB_LIST } from '@/custom-tab-bar/data'
Component({
  properties: {

  },
  data: {
    active: 0,
    isTabbarShow: true, // tabbar的显示隐藏
    list: TAB_LIST, // 列表数据
  },

  /**
   * 组件的方法列表
   */
  methods: {
  }
})

// <!--custom-tab-bar/index.wxml-->
<view wx:if="{{isTabbarShow}}">
  <van-tabbar active="{{ active }}" bind:change="onChange" active-color="#4F7EC4" inactive-color="#9DA5AE" placeholder>
    <van-tabbar-item wx:for="{{list}}" wx:key="item.index">
      <image slot="icon" src="{{ item.iconPath }}" mode="heightFix"  style="height: 48rpx;"/>
      <image slot="icon-active" src="{{ item.selectedIconPath }}" mode="heightFix" style="height: 48rpx;" />
      {{item.text}}
    </van-tabbar-item>
  </van-tabbar>
</view>

在遍历tabbar的时候，van-tabbar-item不能设置icon属性，否则会覆盖自定义的image
在自定义image中，slot="icon"表示未激活，slot="icon-active"表示已激活
这样tabbar就通过active动态渲染出来

切换tabbar时候，触发change事件，我们可以在change事件中设置wx.switchTab跳转页面

    onChange(event) {
      // event.detail 的值为当前选中项的索引
      const active = event.detail
      wx.switchTab({
        url: this.data.list[active].pagePath
      });
    },

页面成功跳转后，你可能会注意到，我们如果直接在onChange设置active的激活值会导致tabbar闪烁以及tabbar的重复刷新，这是因为你每次直接设置active的激活值会导致tabbar重新渲染，所以下面的写法是不可取的：

    onChange(event) {
      // event.detail 的值为当前选中项的索引
      const active = event.detail
      this.setData({ active: event.detail }); // 错误，会导致重新渲染以及tabbar闪烁
      wx.switchTab({
        url: this.data.list[active].pagePath
      });
    },

正确的做法是在tabbar设置跳转的每个页面，通过getTabBar接口异步回调的方式获取tabBar实例，然后设置getTabBar的激活值。
例如我们现在tabbar有index页、goods页、个人中心页，那我们就要在对应页面的onShow()中设置tabbar的激活值：

// index/index.js
onShow() {
    this.getTabBar().setData({
      active: 0
    })
  },

// goods/index.js
onShow() {
    this.getTabBar().setData({
      active: 1
    })
  },

// my/index.js
onShow() {
    this.getTabBar().setData({
      active: 2
    })
  },

在这里，active就是激活的tabbar下标
这个getTabBar()其实就是tabbar的实例，我们可以看一下它内部的构造：

到这里，聪明的你应该就知道了，我们实际上就是在操纵custom-tab-bar/index.js的数据，变换active的值控制每个tab的渲染。
为什么选择在onShow? 因为onShow是每次进入页面都会触发，而onLoad只会触发一次。

自定义tabbar样式

要是先这种自定义图表效果，你只需要在遍历的数据中新增一个图标字段，在遍历的时候做特殊判断处理即可

  {
    "pagePath": "/pages/car/index",
    "text": "购物车",
    "iconPath": "/assets/tabbar/cart.png",
    "selectedIconPath": "/assets/tabbar/cart (1).png",
    "currentIcon": '/assets/tabbar/tab_more.png'
  },

<view wx:if="{{isTabbarShow}}">
  <van-tabbar active="{{ active }}" bind:change="onChange" active-color="#4F7EC4" inactive-color="#9DA5AE" placeholder>
    <van-tabbar-item wx:for="{{list}}" wx:key="item.index">
      <image slot="icon" src="{{ item.iconPath }}" mode="heightFix"  style="height: 48rpx;"/>
      <image slot="icon-active" src="{{ item.selectedIconPath }}" mode="heightFix" style="height: 48rpx;" />
      <!-- 下标2表示购物车，给购物车添加优惠券图标，自定义样式 -->
      <image wx:if="{{index == 2}}" slot="icon" src="{{ item.currentIcon }}" mode="heightFix" style="height: 48rpx;position: absolute;top: -10rpx;right:-30rpx;"/>
      {{item.text}}
    </van-tabbar-item>
  </van-tabbar>
</view>

整体tabbar的显示与隐藏

我们在custom-tab-bar/inde.wxml页面设置了一个view包裹整个自定义tabbar，你可以通过wx:if的形式来控制整个tabbar的显示隐藏

onShow() {
    this.getTabBar().setData({
      isTabbarShow: false, // 隐藏tabbar
    })
  },

你可以验证一下，下面这段代码中，进入active为1的tabbar页会直接隐藏tabbar，一秒后会恢复显示

  onShow() {
    this.getTabBar().setData({
      active: 1,
      isTabbarShow: false
    })
    setTimeout(() => {
      this.getTabBar().setData({
        isTabbarShow: true
      })
    },1000)
  },