تطوير واتساب باستخدام js لإنشاء تأثير شرائح التبويب

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

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

هذا هو تأثير العرض النهائي:

هذا هو خطة شخصية، إذا كان لديك أي خطة أفضل، فلا تتردد في تقديمها ~

تم جمع هذا المقال في 'مجموع مهارات تطوير WeChat Mini Program باستخدام JavaScript'، مرحبًا بقراءته والتعلم.

نقدم لكم الآن مقالًا لتعليم تطبيقات WeChat Mini Program الذي يتم الآن تقديمه بشكل كبير: 'تعليم تطوير تطبيقات WeChat Mini Program' تم جمعه بعناية من قبل المحرر، نأمل أن تنال إعجابكم.

هذا هو نهاية محتويات هذا المقال، آمل أن يكون قد ساعد في تعلمكم، وأتمنى أن تحصلوا على دعمكم لمساعدة دروس呐喊.

بيان: محتويات هذا المقال تم جمعها من الإنترنت، ملكية المحتويات تخص صاحبها الأصلي، تم جمع المحتويات بشكل تلقائي من قبل المستخدمين عبر الإنترنت، هذا الموقع لا يمتلك حقوق الملكية، لم يتم تعديل المحتويات بشكل يدوي، ولا يتحمل هذا الموقع أي مسؤولية قانونية. إذا وجدت محتويات مخالفة لحقوق النسخ، يرجى إرسال بريد إلكتروني إلى: notice#oldtoolbag.com (يرجى استبدال #بـ @ عند إرسال البريد الإلكتروني) لإبلاغنا، وقدم الأدلة ذات الصلة، إذا تم التحقق من ذلك، سيتم حذف المحتويات المزعجة فورًا.