Esempio di codice per implementare l'effetto tabs di scelta rapida nella小程序 di WeChat

Recentemente, l'applicazione WeChat è diventata molto popolare, piena di contenuti caldi, ma è anche possibile notare che quando si cercano parole chiave, i vari siti che appaiono sono ancora spiegazioni ufficiali di WeChat. Proprio in questa ondata di calore, negli ultimi giorni ho letto tutti i documenti tecnici di小程序, poi ho iniziato a scrivere casi. Molti componenti sono già encapsulati internamente da WeChat, ho scoperto che manca l'effetto delle schede tab, negli ultimi due giorni ho studiato un po'. La logica è la seguente:

1、首先点击导航的时候需要两个变量，一个存储当前点击样式类，一个是其它导航默认的样式类

2、选项卡内容列表同样也需要两个变量，一个存储当前显示块，一个存储的是其它隐藏的默认块

3. Utilizzando l'operatore ternario, ottenere l'indice di navigazione tramite il clic, e determinare se aggiungere la classe corrente [Nota: qui ho associato l'evento di clic al livello superiore della barra di navigazione, e ottenere le proprietà dell'oggetto di evento di clic tramite l'oggetto target]}}

Si prega di combinare con l'immagine seguente:

　　　　　 Quindi esaminiamo 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:

Grazie per aver letto, spero che possa aiutare tutti, grazie per il supporto al nostro sito!