1. 程式人生 > >小程式tab + swiper 實現tab下輪播

小程式tab + swiper 實現tab下輪播

<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
    })
  },