Wechat applets customize the top Tab bar

Requirement: Add Tab bar function at the top of page for wechat applet to facilitate switching function modules.

Start: First generate the micro channel small program development project file, and plan to encapsulate its Tab function as a component, which is convenient for reuse of subsequent projects. So put its code under components under the applet project file. WXML

<view class="tabs">
    <view class="tabs_title">

        <view wx:for="{{tabList}}" wx:key="id" class="title_item  {{item.isActive?'active':''}}" bindtap="handleItemTap"
            data-index="{{index}}">

            <view style="margin-bottom:5rpx">{{item.value}}</view>
            <view style="width:20px" class="{{item.isActive? 'active1':''}}"></view>
        </view>

    </view>

    <view class="tabs_content">
        <slot></slot>
    </view>
</view>
Copy the code

Iterating through custom source array data, dynamically binding class names to achieve selected and unselected effects

WXSS

.tabs{
  position: fixed;
  top: 0;
  width: 100vw;
   background-color: #fff;
   z-index: 99;
   border-bottom: 1px solid #efefef;
   padding-bottom: 20rpx;
}
.tabs_title{
  /* width: 400rpx; * /
 width: 70%;  
  display: flex;
  font-size: 28rpx;
  padding: 0 20rpx;
}
.title_item{
  color: #999;
  padding: 15rpx 0;
  display: flex;
  flex: 1;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}
.active{
  /* color:#ED8137; * /
  color: #000000;
  font-size: 18px;
  font-weight: 800;
 
}
.active1{
  /* color:#ED8137; * /
  color: #000000;
  font-size: 18px;
  font-weight: 800;
  border-bottom: 8rpx solid #ED8137;
  border-radius: 4px;
}
Copy the code

Custom style files that can be changed according to the specific needs of the project

JSON { “component”: true, “usingComponents”: {} }

Declare as a component

JS

var App = getApp();
Component({
  /** * Component property list */
  properties: {
    tabList:Object
  },

  /** * The initial data of the component */
  data: {},/** * list of component methods */
  methods: {
    handleItemTap(e){
      // Get the index
      const {index} = e.currentTarget.dataset;
      // Triggers an event for the parent component
      this.triggerEvent("tabsItemChange",{index})
    }
  }
})
Copy the code

Page call component

The introduction of the component

<Tab tabList="{{tabList}}" bindtabsItemChange="tabsItemChange"The > </Tab> page invokes the componenttabList: [{id: 0.value: 'Event Hall'.isActive: true
  },

  {
    id: 1.value: 'My Activities'.isActive: false
  },
  {
    id: 2.value: 'message'.isActive: false},], bind the source array` `'javascript tabsItemChange(e) {} Listens for tabItme switch eventsCopy the code

Realize the screenshot