1.微信app.json檔案中全域性配置小程式API

"tabBar": {
"color": "#fff",
"selectedColor": "red",
"backgroundColor": "skyblue",
"list": [
{
"pagePath": "pages/index/index",
"text": "首頁"
},
{
"pagePath": "pages/logs/logs",
"text": "分類"
}
]
}

2.自定義底部導航欄

<view class='tabitem'>
  <view style='height:1px;margin-bottom: 5px;background: #ccc;'></view>
  <view style="font-size:0px;width: {{ itemWidth }}px" wx:for="{{tabarr}}" class="view-flex-column {{tab==index?'tabbarActive':''}}" wx:key="unique" data-idx='{{index}}' bindtap='tabbartap'>
    <!-- 未選中狀態 -->
    <image wx:if="{{ index!=2 && index != tab }}" style="border-bottom:2px solid #000;" class="tabimg" src="{{ item.img }}" style="width:44rpx;height:44rpx;"></image>
    <!-- 選中狀態 -->
    <image class="activeimg" wx:if="{{ tab==index && index !=2 }}" src="{{ item.activeimg }}" style="width:44rpx;height:44rpx;"></image>
    <!-- 掃一掃圖示 -->
    <image bindtap="click" class="activeimg" wx:if="{{ index==2 }}" src="{{ item.img }}" style="width:80rpx;height:80rpx; position: relative;"></image>
    <text style="font-size:28rpx; margin: 0; padding: 8rpx 0 0 0;">{{ item.text }}</text>
  </view>
</view>
<view wx:if="{{ tab == 0 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <wardrobe address="{{ addr }}" longitudeAndlat="{{ latAndlng }}"></wardrobe>
</view>
<view wx:if="{{ tab == 1 }}" style="height:{{ contentHeight }}px;">
  <brand address="{{ addr }}" longitudeAndlat="{{ latAndlng }}"></brand>
</view>
<view wx:if="{{ tab == 3 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <car></car>
</view>
<view wx:if="{{ tab == 4 }}" style="height:{{ contentHeight }}px;overflow-y: scroll">
  <me></me>
</view>
 

data: {
    tabarr: [
      { img: '../images/bottom/icon-1.png', activeimg: '../images/bottom/icon-1-clicked.png', text: '首頁' },
      { img: '../images/bottom/icon-2.png', activeimg: '../images/bottom/icon-2-clicked.png', text: '分類' },
      { img: '../images/bottom/icon-3.png', text: '' },
      { img: '../images/bottom/icon-4.png', activeimg: '../images/bottom/icon-4-clicked.png', text: '購物車' },
      { img: '../images/bottom/icon-5.png', activeimg: '../images/bottom/icon-5-clicked.png', text: '我的' }
    ],
    tab: 0,
    // 設定
    title: ['首頁', '分類', '', '購物車', '我的'],
  },

  //點選切換事件
  tabbartap(e) {
    var that = this;
    if (e.currentTarget.dataset.idx != 2){
      that.setData({
        tab: e.currentTarget.dataset.idx
      });
      // 為元件新增頂部標題
      wx.setNavigationBarTitle({
        title: this.data.title[e.currentTarget.dataset.idx],
      })
    }
  },

  //動態計算
  onLoad: function (options) {
    console.log(wx.getSystemInfoSync().windowWidth / this.data.tabarr.length)
    this.setData({
      itemWidth: wx.getSystemInfoSync().windowWidth / this.data.tabarr.length,
      contentHeight: wx.getSystemInfoSync().windowHeight -54
    })
  },