微信小程式——自定義菜單tabbar

一、全局配置

在app.json裡面配置 pages、usingComponents 和 tabBar

"pages": [
    "pages/page1/index",
    "pages/page2/index",
    "pages/page3/index",
    "pages/page4/index",
    "pages/page5/index"
], 
"usingComponents": {
    "um-tabbar": "/components/um-tabbar/index"
},
"tabBar": {
    "borderStyle": "white",
    "list": [
      { "pagePath": "pages/page1/index" },
      { "pagePath": "pages/page2/index" },
      { "pagePath": "pages/page4/index" },
      { "pagePath": "pages/page5/index" }
     ]
}      

注：

a、此處 tabBar 下的 list 必須配置跳轉頁面的路徑，否則自定義元件裡面的 wx.switchTab 方法将不能調用

b、全局 usingComponents 沒有配置時，需要在引用頁面的json檔案下配置 usingComponents

二、自定義組價

components/um-tabbar目錄下

1、icons（該目錄存放你的圖示資源，也可放在項目的assets目錄下）

2、index.wxml

<view class=\'box-tabbar\' style=\'height:{{tabHeight}}rpx;\'>
　　<view wx:for="{{tabs}}" wx:key="{{item.content}}" class=\'item\' bindtap=\'handleClick\' data-index=\'{{index}}\'>      
　　　　<image src=\'{{(activeIndex==index)?item.activeImg:item.inactiveImg}}\' wx:if="{{item.activeImg}}"></image>
　　　　<view wx:if="{{item.content}}" style="color:{{(activeIndex==index)?tabStyle.activeColor:tabStyle.inactiveColor}};">
　　　　　　{{item.content}}
　　　　</view> 
　　</view>
　　<!-- 特殊圖示 -->
　　<image src=\'./icons/tab3.png\' class=\'icon-tab3\' bindtap=\'handleClickMid\'></image>
</view>      

3、index.wcss（樣式可自行定義，這裡不做補充）

4、index.js

const config = require(\'./config.js\')
const app = getApp()
Component({
  properties: {
    activeIndex: {
      type: Number,
      value: 1,
    },
  },
  // ios下會有問題，隐藏兩遍原有tabbar
  created () {
    wx.hideTabBar({
      aniamtion: false,
      fail () {
        setTimeout(function () {
          wx.hideTabBar({ aniamtion: false })
        }, 500)
      }
    })
  },
  ready () {
    const _this = this
    // iPhone X 适配tabbar高度
    wx.getSystemInfo({
      success (res) {
        const model = res.model
        if (model.search(\'iPhone X\') != -1 || 
　　　　　　  model.search(\'iPhone 11\') != -1 ||
　　　　　　  model.search(\'unknown<iPhone12,1>\') != -1)
　　　　　{
          _this.setData({
            tabHeight: 150
          })
        }
      }
    })
    wx.hideTabBar({
      aniamtion: false,
      fail () {
        setTimeout(function () {
          wx.hideTabBar({ aniamtion: false })
        }, 500)
      }
    })
  },

  data: config,

  methods: {
    handleClick (e) {
      const idx = e.currentTarget.dataset.index
      if (idx == this.data.activeIndex) return;
      const url = this.data.tabs[idx].url
      wx.switchTab({
        url
      })
    }
  }
})      

注：

a、調用 wx.hideTabBar 方法将定義過的 tabBar 隐藏

b、考慮 iphoneX 适配：調用 wx.getSystemInfo 方法擷取裝置資訊，根據手機型号 

model字段判斷機型，進而設定

 tabbar 的高度

5、index.json

{
  "component": true
}      

6、config.js

module.exports = {
  tabHeight: 100,
  tabStyle: {
    activeColor: \'#333\',
    inactiveColor: \'#ccc\',
  },

  tabs: [
    {
      "content": "tab1",
      "activeImg": "./icons/tab1-on.png",
      "inactiveImg": "./icons/tab1-off.png",
      "url": "/pages/page1/index"
    },
    {
      "content": "tab2",
      "activeImg": "./icons/tab2-on.png",
      "inactiveImg": "./icons/tab2-off.png",
      "url": "/pages/page2/index"
    },
    {
      "content": "tab3",
      "activeImg": "./icons/tab3.png",
      "inactiveImg": "./icons/tab3.png",
      "url": "/pages/page3/index"
    },
    {
      "content": "tab4",
      "activeImg": "./icons/tab4-on.png",
      "inactiveImg": "./icons/tab4-off.png",
      "url": "/pages/page4/index"
    },
    {
      "content": "tab5",
      "activeImg": "./icons/tab5-on.png",
      "inactiveImg": "./icons/tab5-off.png",
      "url": "/pages/page5/index"
    },
  ],
}      

三、頁面引入元件

分别在 tab1、tab2、tab4 和 tab5 的wxml頁面底部引入元件

<um-tabbar active-index="0"></um-tabbar>