微信小程序 swiper 自定义组件

实现功能

1.  点击tab 轮播跟这改变
2.  切换轮播 tab选中值相应改变
3.  轮播内容 按照内容高度自适应 （默认150px）
4.  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>

属性解释

1.  currentTab ：当前选中的tab  string
2.  swiperList ： 需要渲染多少个轮播  数组  （貌似改成数字更合适）
3.  TabList ：tab切换的时候 渲染的数据  （传空不展示）
4.  tabListChange ： 点击tab事件  返回值为点击的当前数据的所有值加点击下标
5. swiperListChange ： 切换轮播回调事件   返回值 滑动后的下标
6. name slot 自定义展示内容用到  不允许修改
7. class 获取高度用到  不允许修改
8. wx:if  因为if  所以高度取得是第一个 swiper_list_item 的高  （只会出现一个）

百度网盘链接

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

提取码: rdnc

永久有效