Wechat applet custom tabbar

Realization effect ：

Official documents ：

Customize tabBar | Wechat open documents

Implementation steps ：

1.  stay app.json Medium tabBar Item designation custom Field , At the same time, the rest tabBar Relevant configurations are also supplemented .

//  You need to define tabBar page 
// “pages”  Don't forget the configuration 
"tabBar": {
    "custom": true,
    "color": "#999999",
    "selectedColor": "#eb7209",
    "backgroundColor": "#ffffff",
    "list": [
        {
            "pagePath": "pages/home/index",
            "iconPath": "static/images/tabbar/home.png",
            "selectedIconPath": "static/images/tabbar/home_cur.png",
            "text": " home page "
        },
        {
            "pagePath": "pages/bill/index",
            "iconPath": "static/images/tabbar/bill.png",
            "selectedIconPath": "static/images/tabbar/bill_cur.png",
            "text": " bill "
        },
        {
            "pagePath": "pages/plan/index",
            "iconPath": "static/images/tabbar/plan.png",
            "selectedIconPath": "static/images/tabbar/plan_cur.png",
            "text": " plan "
        },
        {
            "pagePath": "pages/mine/index",
            "iconPath": "static/images/tabbar/mine.png",
            "selectedIconPath": "static/images/tabbar/mine_cur.png",
            "text": " my "
        }
    ]
},

2. Create a new directory in the root directory custom-tab-bar Folder （ Bear in mind , Folder name cannot be changed , Otherwise, we can't get ）,

#index.html

<!--custom-tab-bar/index.wxml-->
<cover-view class="custom-tabbar">
    <cover-view wx:for="{
   {tabbarList}}" wx:key="index" class="tabbar-item" data-index="{
   {index}}" bindtap="swicthTabbar">
        <cover-image src="{
   {currentName == item.name ? item.selectedIconPath : item.iconPath}}" class="tabbar-icon" style="{
   { item.style }}"></cover-image>
        <cover-view class="{
   {currentName ==  item.name ? 'text-active' : 'tabbar-text'}}">{
   { item.text }}</cover-view>
    </cover-view>
</cover-view>

#index.wxss

/* custom-tab-bar/index.wxss */
.custom-tabbar{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 112rpx;
    background-color: #fff;
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.24);
    /*（ Compatible with mobile phones with security zones ）*/
    padding-bottom: constant(safe-area-inset-bottom);/* compatible  IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);/* compatible  IOS>11.2*/
    display: flex;
}
.tabbar-item{
    flex: 1;
    height: 100%;
    display: flex;
    justify-content:center;
    align-items: center;
    flex-direction: column;
    font-size: 20rpx;
}
.tabbar-icon{
    width: 40rpx;
    height: 40rpx;
    margin-bottom: 8rpx;
}
.tabbar-text{
    color: #999999;
}
.text-active{
    color: #EB7209;
}

#index.js

// custom-tab-bar/index.js
Component({
    data:{
        currentName: 'home',
        // Ready to customize tabbar resources 
        // Self defined tabBar  Need to be in app.json In the configuration 
        tabbarList: [
            {
                "pagePath": "/pages/home/index",
                "iconPath": "/static/images/tabbar/home.png",
                "selectedIconPath": "/static/images/tabbar/home_cur.png",
                "text": " home page ",
                "name": "home"
            },
            {
                "pagePath": "/pages/bill/index",
                "iconPath": "/static/images/tabbar/bill.png",
                "selectedIconPath": "/static/images/tabbar/bill_cur.png",
                "text": " bill ",
                "name": "bill"
            },
            {
                "pagePath": "/pages/plan/index",
                "iconPath": "/static/images/tabbar/plan.png",
                "selectedIconPath": "/static/images/tabbar/plan_cur.png",
                "text": " plan ",
                "name": "plan"
            },
            {
                "pagePath": "/pages/mine/index",
                "iconPath": "/static/images/tabbar/mine.png",
                "selectedIconPath": "/static/images/tabbar/mine_cur.png",
                "text": " my ",
                "name": "mine"
            }
        ]
    },
    lifetimes:{
      // Component lifecycle 
      attached(){
        // Execute when the component real column enters the page node tree 
        console.log(' well , I was executed ');
      }
    },
    methods:{
      // Component defined methods （ Strong visual sense ）
      swicthTabbar(e){
        let { index} = e.currentTarget.dataset;
        wx.switchTab({
          url: this.data.tabbarList[index].pagePath,
        })
      }
    }
})

 3. stay app.js Define global in setTabbar Method

App({
  // Define global setTabbar Method 
  $setTabbar(that, currentName){
    let tabbar = that.getTabBar();
    console.log(tabbar);
    tabbar.setData({
      currentName
    })
  },
  onLaunch() {
  },
})

4. In the use of tabbar Add and change the method of the currently selected page （ for example ：home.js,bill.js,plan.js,mine.js）

onShow() {
    //'home'  According to the page   In the following tabbarList Of name Property requires 
    getApp().$setTabbar(this, 'home');
},

5. In addition, you need to use tabbar Your page needs to consider tabbar Height （ That's how I handled it , Customize a placeholder ）

<view class="plan">
    <!--  Content  -->
    <view class="content"></view>
    <!--  Place holder  -->
    <view class="plan-block"></view>
</view>

.plan {
    height: 100%;
    padding: 0 40rpx;
    display: flex;
    flex-direction: column;
}
.plan .plan-block {
    box-sizing: content-box;
    height: 112rpx;
    /*（ Compatible with mobile phones with security zones ）*/
    padding-bottom: constant(safe-area-inset-bottom);/* compatible  IOS<11.2*/
    padding-bottom: env(safe-area-inset-bottom);/* compatible  IOS>11.2*/
}
.content {
    overflow: hidden;
    flex: 1;
}

thus , Customization of wechat applet tabbar It's done.