第一步：在app.json中根據(jù)使用系統(tǒng)tabbar的步驟添加屬性，然后在額外添加一個(gè)cutsom：true的屬性炊甲，雖然custom為true之后泥彤，我們添加的系統(tǒng)tabbar并不會(huì)渲染，但是系統(tǒng)會(huì)默認(rèn)我們添加的頁(yè)面是屬于tabbar頁(yè)面卿啡，之后在自定義tabbar中可以通過wx.switchTab來(lái)進(jìn)行切換吟吝。

"tabBar": {
    "custom": true,
    "color": "#666666",
    "selectedColor": "#1e9e92",
    "list": [
      {
        "pagePath": "pages/grow/grow",
        "text": "成長(zhǎng)",
        "iconPath": "/images/tabbar_grow.png",
        "selectedIconPath": "/images/tabbar_grow_select.png"
      },{
        "pagePath": "pages/home/home",
        "text": "主頁(yè)",
        "iconPath": "/images/tabbar-badge.png",
        "selectedIconPath": "/images/tabbar-badge-select.png"
      },{
        "pagePath": "pages/mine/mine",
        "text": "我的",
        "iconPath": "/images/tabbar-mine.png",
        "selectedIconPath": "/images/tabbar-mine-select.png"
      }]
  },

第二步：創(chuàng)建一個(gè)自定義tabbar組件

.xml文件如下：

<view class="tab-bar {{isIphoneXSeries ? 'iphoneX' : ''}}">
  <block wx:for="{{items}}" wx:key="title">
    <view class="tab-item" bindtap="onChangeTab" data-index="{{index}}">
      <image class="tab-icon" src="{{activeIndex == index ? item.selectedIcon : item.icon}}"></image>
      <view class="tab-title {{activeIndex == index ? 'active' : 'normal'}}">{{item.title}}</view>
    </view>
  </block>
</view>

.wxss文件如下：

.tab-bar {
  width: 100vw;
  height: 49px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: #ccc solid 1px;
  z-index: 999;
}

.iphoneX {
  padding-bottom: 34px;
}


.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.tab-icon {
  width: 25px;
  height: 25px;
}

.tab-title {
  font-size: 24rpx;
}

.tab-title.active {
  color: #1e9e92;
}

.tab-title.normal {
  color: #666;
}

.json文件如下：

{
  "component": true,
  "usingComponents": {}
}

.js文件如下：

// components/custom_tabbar/custom_tabbar.js
var app = getApp();
Component({
  /**
   * 組件的屬性列表
   */
  properties: {
    activeIndex: {
      type: Number,
      value: 1
    },
  },

  /**
   * 組件的初始數(shù)據(jù)
   */
  data: {
    isIphoneXSeries: false,
    items: [
      {
        'title': '成長(zhǎng)',
        'icon': '/images/tabbar_grow.png',
        'selectedIcon': '/images/tabbar_grow_select.png',
        'path': '../../pages/grow/grow'
      },{
        'title': '主頁(yè)',
        'icon': '/images/tabbar-badge.png',
        'selectedIcon': '/images/tabbar-badge-select.png',
        'path': '../../pages/home/home',
      },{
        'title': '我的',
        'icon': '/images/tabbar-mine.png',
        'selectedIcon': '/images/tabbar-mine-select.png',
        'path': '../../pages/mine/mine'
      },
    ]
  },

  attached: function() {
    this.setData({
      isIphoneXSeries: app.globalData.isIphoneXSeries
    })
  },

  /**
   * 組件的方法列表
   */
  methods: {
    onChangeTab(res) {
      var index = res.currentTarget.dataset.index;      
      wx.switchTab({
        url: this.data.items[index].path
      })
    }
  }
})

第三步：在tab頁(yè)面引入tabbar組件

//grow.json中引入組件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在grow.wxml中使用組件
<tabbar activeIndex="{{0}}"/>

//home.json中引入組件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在home.wxml中使用組件
<tabbar activeIndex="{{1}}"/>

//mine.json中引入組件
"usingComponents": {
    "tabbar": "../../components/custom_tabbar/custom_tabbar"
  }
//在mine.wxml中使用組件
<tabbar activeIndex="{{2}}"/>

總結(jié)：使用自定義組件的流暢性并沒有系統(tǒng)的好，第一次加載的時(shí)候會(huì)有一次閃爍的問題颈娜。