WeChat entwickelt js, um den Tabs-Effekt zu erzielen

In letzter Zeit sind WeChat-Anwendungskonten in vollem Gange und erfreuen sich großer Beliebtheit, aber Sie können auch Suchbegriffe finden, und auf verschiedenen Websites erscheinen die offiziellen Dokumenterklärungen von WeChat. Gerade rechtzeitig, um dieser Begeisterung nachzukommen, habe ich mir in den letzten Tagen die technische Dokumentation des Miniprogramms durchgelesen und dann direkt angefangen, den Fall zu schreiben. Viele Komponenten wurden in WeChat gepackt, und ich habe gerade festgestellt, dass es keinen Tab-Effekt gibt, also habe ich es in den letzten zwei Tagen erst studiert. Die Idee ist wie folgt:

1. Wenn Sie auf die Navigation klicken, benötigen Sie zwei Variablen, um die aktuelle Klickstilklasse zu speichern, und die andere ist die Standardstilklasse für andere Navigationen

2. Die Tab-Inhaltsliste ist ebenfalls Zwei Variablen werden benötigt, eine speichert den aktuellen Anzeigeblock und die andere speichert andere versteckte Standardblöcke

3. Verwenden Sie die trinokulare Operation, um den Navigationsindex zu erhalten Klicken Sie und beurteilen Sie anhand des Index, ob die aktuelle Klasse hinzugefügt werden soll. [Hinweis: Hier binde ich das Klickereignis an die übergeordnete Navigationsleiste und erhalte die durch den Klick ausgelösten Ereignisobjekteigenschaften durch das Zielobjekt.]

Bitte Kombinieren Sie die folgenden Renderings:

Connect Kommen Sie herunter und sehen Sie sich den Quellcode direkt an:

demo.wxml:

<view class="tab">
 <view class="tab-left" bindtap="tabFun">
 <view class="{{tabArr.curHdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd01" data-id="0">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd02" data-id="1">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd03" data-id="2">tab-hd01</view>
 <view class="{{tabArr.curHdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}" id="tab-hd04" data-id="3">tab-hd01</view>
 </view>
  
 <view class="tab-right">
 <view class="right-item {{tabArr.curBdIndex==&#39;0&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd01</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;1&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd02</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;2&#39;? &#39;active&#39; : &#39;&#39;}}">tab-bd03</view>
 <view class="right-item {{tabArr.curBdIndex==&#39;3&#39;? &#39;active&#39; : &#39;&#39;}}">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;
}

>