小程序tab + swiper 实现tab下轮播

最新推荐文章于 2024-07-22 21:07:59 发布

tang05709

最新推荐文章于 2024-07-22 21:07:59 发布

阅读量394

点赞数

分类专栏：网站相关的其他文章

本文链接：https://blog.csdn.net/tang05709/article/details/82453679

版权

网站相关的其他文章专栏收录该内容

83 篇文章 0 订阅

订阅专栏

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