Sviluppo WeChat: implementazione di tabs con js

Negli ultimi tempi, l'applicazione WeChat è diventata molto popolare, piena di contenuti caldi, ma è anche possibile notare che le parole chiave di ricerca cercate sono ancora tutte spiegazioni ufficiali di WeChat. Sulla scia di questa ondata, negli ultimi giorni ho letto tutto il documento tecnico del mini-programma e ho iniziato a scrivere casi. Molti componenti sono già encapsulati internamente da WeChat, e ho scoperto che manca l'effetto delle schede tab. Negli ultimi due giorni ho studiato questo. Il pensiero è il seguente:　

1、Quando si clicca sul navigatore, sono necessarie due variabili, una per memorizzare la classe di stile cliccata corrente, e una per le altre schede di navigazione predefinite

2、La lista dei contenuti delle schede richiede anche due variabili, una per memorizzare il blocco visualizzato corrente, e una per memorizzare il blocco predefinito nascosto

3、Utilizzando l'operatore ternario, ottenere l'indice di navigazione tramite il clic, e determinare se aggiungere la classe corrente in base all'indice [Nota: qui ho binding l'evento di clic sul navigatore superiore, tramite l'oggetto target ottenere le proprietà dell'evento di clic scatenato]

Si prega di combinare la seguente immagine:

Quindi, controlla direttamente il codice sorgente:

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){ 
 //获取触发事件组件的dataset属性 
 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; 
} 

L'effetto di dimostrazione finale è il seguente:

Questo è solo un piano personale, se hai un migliore piano, sei invitato a proponerlo~

Questo articolo è stato raggruppato in 'Raccolta di tecniche di sviluppo WeChat JavaScript', tutti i benvenuti a studiare e leggere.

Ti consiglio di leggere una guida di alta attenzione attuale: 'Guida di sviluppo del WeChat Mini Program'. La guida è stata curata con cura dagli editor, spero ti piaccia.

Questo è tutto il contenuto dell'articolo, spero che sia utile per la tua apprendimento, e spero che tu sostenga fortemente la guida di urla.

Dichiarazione: il contenuto di questo articolo è stato raccolto da Internet, di proprietà dei rispettivi autori, il contenuto è stato caricato autonomamente dagli utenti di Internet, questo sito non detiene i diritti di proprietà, non è stato editato manualmente e non assume responsabilità legali correlate. Se trovi contenuti sospetti di violazione del copyright, sei invitato a inviare una e-mail a notice#oldtoolbag.com (sostituisci # con @) per segnalare il problema e fornire prove pertinenti. Una volta verificata, il sito rimuoverà immediatamente il contenuto sospetto di violazione del copyright.