实现功能
- 点击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
永久有效