Micro-channel applet - custom menu tabbar

First, the global configuration

Configuration pages, usingComponents tabBar and the inside app.json

"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" }
     ]
}

Note:

1, list down here tabBar must configure the path of the jump page, or custom components inside from wx.switchTab method will not be called

2, when the global usingComponents no configuration, you need to configure usingComponents in the json file reference page

Second, the divalent group Custom

components / um-tabbar directory

1, icons (the directory to store your icons resources, can also be placed in the directory of the project 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 (definable style, not added here)

4、index.js

the require config = const ( 'the config.js ./') 
const = getApp App () 
the Component ({ 
  Properties: { 
    activeIndex: { 
      type: Number The, 
      value:. 1, 
    }, 
  }, 
  there is problem // ios, two hidden over the original TabBar 
  Created () { 
    wx.hideTabBar ({ 
      aniamtion: to false, 
      Fail () { 
        the setTimeout (function () { 
          wx.hideTabBar ({aniamtion: to false}) 
        }, 500) 
      } 
    }) 
  }, 
  READY () { 
    the this _this = const 
    // X-adapted tabbar the iPhone height 
    wx.getSystemInfo ({ 
      Success (RES) { 
        const = res.model 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
      })
    }
  }
})

Note: Calling wx.hideTabBar method will be defined over the tabBar Hide

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"
    },
  ],
}

Third, the introduction of page components

Respectively tab1, tab2, tab4 wxml page and the bottom of the introduction means tab5

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