مثال على تحقيق تأثير tabs في تطبيق WeChat Mini Program

الاخيرة في تطبيقات واتساب هي في ازدهار شديد، مليئة بالموضوعات الشائعة، ولكن يمكن ملاحظة أن عند البحث عن الكلمات المفتاحية، تظهر مواقع مختلفة تحتوي على تفسيرات الوثائق الرسمية لواتساب. بالضبط في هذا الازدهار، خلال هذه الأيام، قرأت كل وثائق تقنية الصغرى، وأخذت على الفور يدور في كتابة الحالات. العديد من المكونات تم تعبئتها بالفعل داخل واتساب، ووجدت أن هناك تأثيرًا للاختيار بين التبويبات، وأجريت دراسة في هذا الأمر في الأيام القليلة الماضية.思路如下：

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

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

3- باستخدام الحساب الثلاثي، استطيع الحصول على معرف التوجيه عبر النقر، ويتم�断 ما إذا كان يجب إضافة الصنف الحالي [ملاحظة: سأقوم بتعيين أحداث النقر على الرأس الأبوي للشريط الإرشادي، للحصول على خصائص الحدث الذي أطلق النقر من خلال عنصر الهدف]}}

يرجى الاعتماد على الشكل التالي:

　　　　　 لاحقًا، راجع المصدر مباشرة:

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

　　　 نتائج العرض النهائي كالتالي:

　

شكرًا على القراءة، آمل أن تكون مفيدًا للجميع، شكرًا لدعمكم لموقعنا!