WeChat-Entwicklung: js-basierte tabs-Optionseffektumsetzung

Der neueste WeChat App ist sehr beliebt, voller Hit, aber man kann auch sehen, dass die Such关键词, die auf verschiedenen Websites erscheinen, alle offiziellen Dokumentationen von WeChat sind. Genau zu dieser Welle, habe ich in den letzten Tagen die Technische Dokumentation des Mini-Programms durchgesehen und habe direkt mit dem Schreiben des Beispiels begonnen. Viele Komponenten sind bereits von WeChat intern verpackt, und ich habe zufällig festgestellt, dass es keine Tab-Optionseffekt gibt, habe die letzten beiden Tage untersucht. Die Idee ist wie folgt:　

1、Beim ersten Klicken auf die Navigation sind ebenfalls zwei Variablen erforderlich, eine speichert die aktuelle geklickte Stilebene und eine andere die Standardstilebene der anderen Navigation

2、Für die Liste der Optionen der Karteikarte sind ebenfalls zwei Variablen erforderlich, eine speichert den aktuellen anzeigten Block und eine speichert den anderen versteckten Standardblock

3、Durch das Klicken auf die Navigation wird der Indikator der Navigation erfasst und anhand des Indikators wird beurteilt, ob die aktuelle Klasse hinzugefügt wird【Bemerkung: Hier habe ich das Klickereignis auf den übergeordneten Navigationsbereich gebunden und habe durch das Zielobjekt das auslösende Ereignisobjekt erhalten】

Bitte sehen Sie sich das folgende Bild an:

Schauen wir direkt auf den Quellcode:

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"> 
 <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){ 
 //Erfassen der dataset-Attribut des auslösenden Ereignis-Komponenten 
 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; 
} 

Der endgültige Demonstrationseffekt sieht wie folgt aus:

Dies ist nur ein persönlicher Plan. Wenn Sie bessere Vorschläge haben, freuen wir uns über Ihre Beiträge~

Dieser Artikel wurde in 'JavaScript WeChat Development Tips Summary' aufgenommen. Herzlich willkommen zum Lernen und Lesen.

Wir empfehlen Ihnen ein Tutorial zu einem der derzeit am häufigsten besuchten WeChat Mini-Programm-Tutorials: 'WeChat Mini Program Development Tutorial'. Der Redakteur hat es sorgfältig zusammengestellt und hofft, dass es Ihnen gefällt.

Das ist der gesamte Inhalt dieses Artikels. Wir hoffen, dass er Ihnen beim Lernen hilft und dass Sie die Unterstützung für das Anrufungs-Tutorial erweitern.

Erklärung: Der Inhalt dieses Artikels wurde aus dem Internet entnommen und gehört dem Urheberrecht des jeweiligen Autors. Der Inhalt wurde von Internetbenutzern selbstständig beigesteuert und hochgeladen. Diese Website besitzt keine Eigentumsrechte und hat den Inhalt nicht manuell bearbeitet. Sie übernimmt auch keine rechtlichen Verantwortlichkeiten. Wenn Sie Inhalte mit urheberrechtlichen Bedenken finden, freuen wir uns über eine E-Mail an: notice#oldtoolbag.com (Bitte ersetzen Sie # durch @ beim Senden einer E-Mail, um eine Meldung zu senden und relevante Beweise bereitzustellen. Bei nachgewiesener Rechtsverletzung wird diese Website die betreffenden urheberrechtlichen Inhalte sofort löschen.)