實(shí)現(xiàn)功能

?點(diǎn)擊tab 輪播跟這改變

?切換輪播 tab選中值相應(yīng)改變

?輪播內(nèi)容 按照內(nèi)容高度自適應(yīng) （默認(rèn)150px）

?slot功能? 自定義每一個(gè)輪播的內(nèi)容? ?

使用方法

<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 ：當(dāng)前選中的tab? string

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

?TabList ：tab切換的時(shí)候 渲染的數(shù)據(jù)? （傳空不展示）

?tabListChange ： 點(diǎn)擊tab事件? 返回值為點(diǎn)擊的當(dāng)前數(shù)據(jù)的所有值加點(diǎn)擊下標(biāo)

swiperListChange ： 切換輪播回調(diào)事件? ?返回值 滑動(dòng)后的下標(biāo)

name slot 自定義展示內(nèi)容用到? 不允許修改

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

wx:if? 因?yàn)閕f? 所以高度取得是第一個(gè)?swiper_list_item 的高? （只會(huì)出現(xiàn)一個(gè)）

百度網(wǎng)盤鏈接

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

提取碼: rdnc

永久有效

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。