實現功能

?點擊tab 輪播跟這改變

?切換輪播 tab選中值相應改變

?輪播內容 按照內容高度自適應 （默認150px）

?slot功能? 自定義每一個輪播的內容? ?

使用方法

<myswiper currentTab='{{currentTab}}' swiperList="{{itemList}}" TabList="{{TabList}}" bindtabListChange="tabListChange" bindswiperListChange="swiperListChange"><view slot="list0" wx:if="{{currentTab==0}}" class="swiper_list_item"></view><view slot="list1" wx:if="{{currentTab==1}}" class="swiper_list_item"></view><view slot="list2" wx:if="{{currentTab==2}}" class="swiper_list_item"></view><view slot="list3" wx:if="{{currentTab==3}}" class="swiper_list_item"></view> </myswiper>

屬性解釋

?currentTab ：當前選中的tab? string

?swiperList ： 需要渲染多少個輪播? 數組? （貌似改成數字更合適）

?TabList ：tab切換的時候 渲染的數據? （傳空不展示）

?tabListChange ： 點擊tab事件? 返回值為點擊的當前數據的所有值加點擊下標

swiperListChange ： 切換輪播回調事件? ?返回值 滑動后的下標

name slot 自定義展示內容用到? 不允許修改

class 獲取高度用到? 不允許修改

wx:if? 因為if? 所以高度取得是第一個?swiper_list_item 的高? （只會出現一個）

百度網盤鏈接

鏈接: https://pan.baidu.com/s/1fAtp6K-eBe5XVD5suM7bBw ?

提取碼: rdnc

永久有效

總結

以上是生活随笔為你收集整理的微信小程序 swiper 自定义组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。