WeChat applet implementation tab function, WeChat applet Tab

Applet implementation tab function, Applet Tab

The examples in this article share the code displayed by the applet tab function for your reference. The details are as follows:

First, let's take a look at the effect of tabs on the Applet:

The principle is to layout it first (you don't have to talk about it), define the same Click Event on each of the tabs above, and then bind a unique identifier to each component, then, when an event is triggered, the bound identifier is obtained to determine which tab is currently clicked, and then to determine which tab is shown below. The code is displayed:

Wxml:

<view class="menu_box"> <text class='menu1 {{menuTapCurrent=="0"?"borders":""}}' data-current="0" catchtap="menuTap">menu1</text> <text class='menu2 {{menuTapCurrent=="1"?"borders":""}}' data-current="1" catchtap="menuTap">menu2</text></view><view class="tab1" hidden="{{menuTapCurrent!='0'}}">tab1</view><view class="tab2" hidden="{{menuTapCurrent!='1'}}">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; // obtain the bound data // change the value of menuTapCurrent to the data bound to the currently selected menu this. setData ({menuTapCurrent: current });},

End.

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.