Mini Program Custom TabBar Component Encapsulation

This article example shares the specific code for encapsulating the custom tabBar component of the mini program for your reference. The specific content is as follows

1. Create a new component: create a tabBar under component

2. The index.wxml structure of the component is as follows:

<cover-view class="tab-bar">
 <cover-view class="tab-bar-border"></cover-view>
 <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="tabChange">
  <cover-image src="{{tabbarIndex === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
  <cover-view style="color: {{tabbarIndex === index ? selectedColor : color}}">{{item.text}}</cover-view>
 </cover-view>
</cover-view>

3. The index.wxss structure of the component is as follows:

.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-border {
  background-color: rgba(0, 0, 0, 0.33);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 1px;
  transform: scaleY(0.5);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.tab-bar-item cover-image {
  width: 28px;
  height: 28px;
  margin-bottom: 2px;
}

.tab-bar-item cover-view {
  font-size: 10px;
}

4. The index.js structure of the component is as follows:

// pages/components/tabBar/index.js
Component({
  /**
 1. List of component properties*/
  options:
    multipleSlots: true // Enable multiple slots support in the options when defining the component},
  properties:
    list: {
      type: Array,
      value: []
    },
    selectedColor:{
      type: String,
      value:''
    },
    color:{
      type: String,
      value:''
    },
  },

  /**
 2. Initial data of the component*/
  data: {
    tabbarIndex: 0 //The first tab element is displayed by default},

  lifetimes:
    attached() {}
  },

  /**
 3. Component method list*/
  methods: {
    //Component click event tabChange(e) {
      //Get the index of the bottom bar element let index = e.currentTarget.dataset.index;
      this.setData({
        tabbarIndex:index,
      })
      //triggerEvent gets the event of the component //onMyEvent The click event name passed from the page this.triggerEvent('onMyEvent',{
        tabbarIndex:index,
      })
    },
  }
})

5. The index.json structure of the component is as follows:

{
  "component": true,
  "usingComponents": {}
}

6. Use of components in pages
7. The json code of the page is as follows:

{
  "navigationBarTitleText": "Test",
  "usingComponents": {
    "mp-tabbar": "../components/tabBar/index"
  }
}

8. The wxml code of the page is as follows:

//The content displayed on the page when tab1 is selected <view wx:if="{{tabbarIndex == 0}}">111111</view>
//The content displayed on the page when tab2 is selected <view wx:if="{{tabbarIndex == 1}}">222222</view>
//The content displayed on the page when tab3 is selected <view wx:if="{{tabbarIndex == 2}}">333333</view>
<mp-tabbar list="{{list}}" id='tabComponent' bind:onMyEvent="tabChange"></mp-tabbar>

9. The js code of the page is as follows:

Page({
  data: {
    tabbarIndex:0, //Default first tab element color: "#555555",
    selectedColor: "#2ea7e0",
    //Bottom bar list: [{
        "text": "Market",
        "iconPath": "/images/bazaar.png",
        "selectedIconPath": "/images/bazaar_selected.png",
      },
      {
        "text": "Recharge",
        "iconPath": "/images/recharge.png",
        "selectedIconPath": "/images/recharge_selected.png",
      }, {
        "text": "Fleet",
        "iconPath": "/images/market.png",
        "selectedIconPath": "/images/market_selected.png",
      }
    ]
  },
  /**
   * Life cycle function--monitor page display*/
  onShow: function () {
    this.tabComponent = this.selectComponent('#tabComponent');
    let selectedColor = this.data.selectedColor;
    let color = this.data.color;
    this.tabComponent.setData({
      selectedColor: selectedColor,
      color:color
   })
   console.log(this.tabComponent.data.tabbarIndex)
  },
  //Get the data passed by the component tabChange:function(e){
    let index = e.detail.tabbarIndex;
    this.setData({
      tabbarIndex:index
    })
    console.log(e.detail.tabbarIndex)
  }
})

The final effect is shown in the figure:

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

WeChat Mini Program (Part 3) Detailed Introduction to TabBar Bottom Navigation
WeChat applet development to achieve tab (TabBar at the top of the window) page switching
WeChat applet development: Tabbar example detailed explanation
WeChat applet creates a new login page and hides the tabBar
WeChat Mini Program official dynamic custom bottom tabBar example
Detailed explanation of WeChat applet custom tabBar adaptation in uni-app
Implementation of tabbar icons and colors in WeChat applet development
WeChat applet development tab (TabBar at the bottom of the window) page switching
WeChat applet tabBar usage example detailed explanation
Detailed explanation of the development of WeChat applet custom tabBar component

<<: Solve the problem that Docker must use sudo operations

>>: HTML reuse techniques