微信小程序——自定義菜單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>