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

Source: Internet
Author: User

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.

Large-Scale Price Reduction
  • 59% Max. and 23% Avg.
  • Price Reduction for Core Products
  • Price Reduction in Multiple Regions
undefined. /
Connect with us on Discord
  • Secure, anonymous group chat without disturbance
  • Stay updated on campaigns, new products, and more
  • Support for all your questions
undefined. /
Free Tier
  • Start free from ECS to Big Data
  • Get Started in 3 Simple Steps
  • Try ECS t5 1C1G
undefined. /

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.