WeChat applet that implements tab function

Tab browsing is a feature in Internet Explorer that allows you to open multiple websites in a single browser window. You can open web pages in new tabs and switch between them by clicking on the tab you want to view. By using tabbed browsing, you can potentially reduce the number of items displayed on your taskbar. In this article, we will share with you the WeChat applet to implement the tab function.

First look at the effect of the tabs on the WeChat mini program:

The principle is to lay it out first (it goes without saying), Then define the same click event on each tab above, and then bind a unique identifier to each component. Then when the click event is triggered, obtain the bound identifier and determine the currently clicked Which tab is it, and then determine which piece should be displayed below? Now enter the code:

wxml:

<view class="menu_box">
 <text class=&#39;menu1 {{menuTapCurrent=="0"?"borders":""}}&#39; data-current="0" catchtap="menuTap">menu1</text>
 <text class=&#39;menu2 {{menuTapCurrent=="1"?"borders":""}}&#39; data-current="1" catchtap="menuTap">menu2</text>
</view>
<view class="tab1" hidden="{{menuTapCurrent!=&#39;0&#39;}}">tab1</view>
<view class="tab2" hidden="{{menuTapCurrent!=&#39;1&#39;}}">tab2</view>

wxss:

.menu_box{
 display: flex;
 height: 80rpx;
}
.menu1,.menu2{
 flex: 1;
 font-size:30rpx;
 line-height: 80rpx;
 text-align: center;
}
.borders{
 border-bottom: 4rpx solid #f00;
 color: #f00;
}
.tab1,.tab2{
 height: 300rpx;
 background: #23bff3;
}
.tab2{
 background: #ccc;
}

JS:

 menuTap:function(e){
 var current=e.currentTarget.dataset.current;//获取到绑定的数据
 //改变menuTapCurrent的值为当前选中的menu所绑定的数据
 this.setData({
  menuTapCurrent:current
 });


 },

Related recommendations:

WeChat mini program robot automatic customer service function

WeChat mini program-imitation Hema fresh food

Detailed explanation of video, music, and picture components of WeChat mini program

Example of password input in WeChat mini program

The most complete WeChat mini program project Example

The above is the detailed content of WeChat applet that implements tab function. For more information, please follow other related articles on the PHP Chinese website!