Micro-Credit Development JS Implementation of Tabs tab effect _javascript skills

The recent micro-letter application number is fired in full swing, hot, but also can find the search keywords out, all kinds of websites appear is the micro-letter Official document interpretation. Just in time to catch up with this upsurge, these days first the small program technical document looked over, the direct handwriting case. Many component micro-letters have been encapsulated inside, just found no tab tab effect, these two days just study the next. Ideas are as follows:

1, first click the navigation time need two variables, a store current click Style class, one is the other navigation default style class

2, the Tab content list also needs two variables, one store the current display block, one store is the other hidden default block

3, using the three mesh operation by clicking to get the navigation index, according to the index to determine whether to add the current class "remarks, here I will click event Binding in the parent navigation bar, through the target object to get click Triggered Event Object Properties"

Please combine the following effect chart:

Next look directly at the source:

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 ' > & Lt;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) { 
 // Gets the DataSet attribute that triggers the event component 
 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 demo results are as follows:

The above is only a personal program, if there is a better solution, welcome to propose ~

This article has been organized into the "JavaScript micro-Credit Development Skills Summary", welcome to learn to read.

For everyone to recommend now more attention than the micro-letter Program Tutorial: "Micro-letter Small Program Development tutorial" Small series for everyone carefully organized, hope like.

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.