Example code of implementing tabs option card effect in WeChat Mini Program

The recent WeChat mini-program is so popular that it is hot and full of excitement, but it can also be found that when searching for keywords, various websites still appear to be the official WeChat documentation. Just in time for this trend, I've read through the mini-program technical documentation in these days and started writing cases directly. Many components have been encapsulated by WeChat internally, and I just found that there is no tab card effect. These two days, I have studied it. The ideas are as follows：

1、When clicking the navigation for the first time, two variables are needed, one to store the current clicked style class, and one to store the default style class of other navigation

2、The tab content list also needs two variables, one to store the current displayed block, and one to store the other hidden default block

3、Use the ternary operator to obtain the navigation index by clicking, and judge whether to add the current class according to the index [Note, here I bind the click event to the parent navigation bar, and get the event object attribute triggered by the target object].

Please combine the following effect diagram：

　　　　　 Next, let's directly view the source code：

demo.wxml：

<view class="tab"> 
 <view class="tab-left" bindtap="tabFun"> 
  <view class="{{tabArr.curHdIndex=='0'? 'active' : ''}}" id="tab-hd01" data-id="0">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='1'? 'active' : ''}}" id="tab-hd02" data-id="1">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='2'? 'active' : ''}}" id="tab-hd03" data-id="2">tab-hd01</view> 
  <view class="{{tabArr.curHdIndex=='3'? 'active' : ''}}" id="tab-hd04" data-id="3">tab-hd01</view> 
 </view> 
 <view class="tab-right"> 
  <view class="right-item {{tabArr.curBdIndex=='0'? 'active' : ''}}">tab-bd01</view> 
  <view class="right-item {{tabArr.curBdIndex=='1'? 'active' : ''}}">tab-bd02</view> 
  <view class="right-item {{tabArr.curBdIndex=='2'? 'active' : ''}}">tab-bd03</view> 
  <view class="right-item {{tabArr.curBdIndex=='3'? 'active' : ''}}">tab-bd04</view> 
 </view> 
</view> 

demo.js：

Page( { 
 data: { 
  tabArr: { 
   curHdIndex: 0, 
   curBdIndex: 0 
  }, 
 }, 
 tabFun: function(e){ 
  //Get the dataset attribute of the component triggered by the event 
  var _datasetId=e.target.dataset.id; 
  console.log("----"+_datasetId+"----"); 
  var _obj={}; 
  _obj.curHdIndex=_datasetId; 
  _obj.curBdIndex=_datasetId; 
  this.setData({ 
   tabArr: _obj 
  }); 
 }, 
 onLoad: function( options ) { 
  alert( "------" ); 
 } 
}); 

demo.wxss：

.tab{ 
  display: flex; 
  flex-direction: row; 
} 
.tab-left{ 
  width: 200rpx; 
  line-height: 160%; 
  border-right: solid 1px gray; 
} 
.tab-left view{ 
  border-bottom: solid 1px red; 
} 
.tab-left .active{ 
  color: #f00; 
} 
.tab-right{ 
  line-height: 160%; 
} 
.tab-right .right-item{ 
  padding-left: 15rpx; 
  display: none; 
} 
.tab-right .right-item.active{ 
  display: block; 
} 

　　　 The final demonstration effect is as follows:

　

Thank you for reading, I hope it can help you, thank you for your support to our website!