WeChat applet: how to implement the tabs tab effect example

The little girl was just getting started with the mini-program. she found that many internal components have been encapsulated, but there are no tabs for the components. Recently, I just needed to study them. Sort out the information for discussion and study. if you have any questions or can improve it, please give us some advice. The little girl was just getting started with the mini-program. she found that many internal components have been encapsulated, but there are no tabs for the components. Recently, I just needed to study them. Sort out the information for discussion and study. if you have any questions or can improve it, please give us some advice.

First, two variables are required when you click the navigation. one is to store the currently clicked style class, and the other is the default style class of other navigation.

The tab content list also requires two variables, one for storing the current display block and the other for storing the hidden default block.

You can click "Get navigation index" by using the "three items" operation to determine whether to add the current class based on the index. [note, here I will bind the click event to the parent navigation bar, get the Event object properties triggered by clicking through the target object]

Please combine the following:

Demo. wxml:

Demo. js

Page ({data: {tabArr: {curHdIndex: 0, curBdIndex: 0 },}, tabFun: function (e) {// Obtain the dataset attribute var _datasetId=e.tar get of the trigger event component. 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 result is as follows:

Summary: the principle of Kagami_Tiger is to select a tab and call to select the tab content and hide other tab content. of course, if you can classify each tab on a different page, then, each tab corresponds to different pages one by one, which may be better. I have never been so developed. you are also welcome to share and learn from each other to make progress together.

For more small programs: For more information about how to implement the tabs tab effect example, refer to PHP!

Related articles:

Implementation of the small program tabs tab effect

Simple and stylish pure CSS3 Tabs tab effects

Switch the tabs tab using javascript