WeChat-Applet, das die Tab-Funktion implementiert

Tab-Browsing ist eine Funktion im Internet Explorer, mit der Sie mehrere Websites in einem einzigen Browserfenster öffnen können. Sie können Webseiten in neuen Registerkarten öffnen und zwischen ihnen wechseln, indem Sie auf die Registerkarte klicken, die Sie anzeigen möchten. Durch die Verwendung von Tab-Browsing können Sie möglicherweise die Anzahl der in Ihrer Taskleiste angezeigten Elemente reduzieren. In diesem Artikel stellen wir Ihnen das WeChat-Applet zur Implementierung der Tab-Funktion vor.

Schauen Sie sich zunächst die Wirkung der Registerkarten im WeChat-Miniprogramm an:

Das Prinzip besteht darin, es zuerst zu gestalten (das ist nicht der Fall). (Das muss nicht gesagt werden.) Definieren Sie dann auf jeder Registerkarte oben dasselbe Klickereignis und binden Sie dann eine eindeutige Kennung an jede Komponente. Wenn das Klickereignis ausgelöst wird, rufen Sie die gebundene Kennung ab und bestimmen Sie, um welche Registerkarte es sich handelt. und dann bestimmen, welches Stück unten angezeigt werden soll? Fügen Sie nun den Code hinzu:

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
 });


 },

Verwandte Empfehlungen:

Automatische Kundendienstfunktion des WeChat-Miniprogrammroboters

WeChat-Miniprogramm-Imitation Hema Fresh

Detaillierte Erläuterung der Video-, Musik- und Bildkomponenten des WeChat-Miniprogramms

Beispiel für die Passworteingabe im WeChat-Miniprogramm

Die umfassendsten Projektbeispiele für das WeChat-Miniprogramm

Das obige ist der detaillierte Inhalt vonWeChat-Applet, das die Tab-Funktion implementiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!