WeChat Development: Implementing tabs effect with js

The recent WeChat applet is very popular, full of enthusiasm, but it can also be found that when searching for keywords, various websites that appear are all official WeChat document explanations. Just in time for this trend, I've been studying the applet technical documents for a few days, and then started writing cases. Many components have been encapsulated by WeChat internally, and I just found that there is no tab effect, so I studied it for two days. The idea is as follows:　

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

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

3Using the ternary operator 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, and get the event object attribute that triggered the click through the target object]

Please refer to the following illustration:

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 that triggered 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:

This is just a personal plan, if there is a better plan, please propose~

This article has been organized into 'Summary of JavaScript WeChat Development Techniques', welcome to learn and read.

Here is a tutorial on WeChat Mini Program with high attention: 'WeChat Mini Program Development Tutorial'. The editor has carefully compiled it for everyone, hoping you will like it.

That's all for this article, I hope it will be helpful to everyone's learning, and I also hope that everyone will support and cheer for the tutorial more.

Statement: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the ownership, does not undergo artificial editing processing, nor undertake relevant legal liability. If you find any suspected copyright content, please send an email to: notice#oldtoolbag.com (When sending an email, please replace # with @ to report, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)