WeChat develops js to realize tabs effect

Recently, WeChat application accounts have been in full swing and are very popular, but you can also find search keywords, and what appear on various websites are WeChat’s official document explanations. Just in time to catch up with this craze, I read through the technical documentation of the mini program in the past few days, and then started writing the case directly. Many components have been packaged inside WeChat, and I just found that there is no tab effect, so I just studied it in the past two days. The idea is as follows:

1. First, when you click on the navigation, you need two variables. One is to store the current click style class, and the other is the default style class of other navigations.

2. The tab content list also needs two variables, one is to store the current click style class. Display blocks, one stores other hidden default blocks

3. Use trinocular operation to obtain the navigation index by clicking, and judge whether to add the current class based on the index [Note, here I bind the click event to the parent navigation bar, through The target object gets the event object properties triggered by the click]

Please combine the following renderings:

Then check the source code directly:

demo.wxml：

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

demo.js：

Page( {
 data: {
 tabArr: {
 curHdIndex: 0,
 curBdIndex: 0
 },
 },
 tabFun: function(e){
 //获取触发事件组件的dataset属性
 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;
}