小程式tab + swiper 實現tab下輪播
阿新 • • 發佈:2018-10-31
<view class="course-advantage"> <view class="list-active-tab course-types-tab"> <view class="container"> <view class="pull-right"> <ul class="list-tabs clearfix"> <li wx:for="{{ advantages }}" wx:key="{{ item.id }}" bindtap="change_tab" data-current="{{ index }}"> {{ item.title }} </li> </ul> </view> </view> </view> <view class="list-active-content course-types-content"> <view wx:for="{{ advantages }}" wx:key="{{ item.id }}"> <view class="list-contents course-banner course-banner-l{{ index }} {{ current_tab == index ? 'c-active' : '' }}"> <swiper autoplay="true" class="swiper-wrapper"> <swiper-item wx:for="{{ util.getJsonImageSrc( item.images ) }}" wx:key="{{ item.id }}" class="swiper-slide banner"> <image src="{{ util.getImageSrc( item ) }}" mode="widthFix" ></image> </swiper-item> </swiper> </view> </view> </view> </view>
我們需要在tab切換項上繫結事件,並獲取到當前index
然後定義一個tab變數,判斷是否等於index,相等則加上active,不相等則去掉active
'current_case_tab': 0,
change_tab: function (e) {
var that = this
var current_li = e.currentTarget.dataset.current
that.setData({
current_tab: current_li
})
},