swiper实现滑动tab切换效果

最新推荐文章于 2024-07-20 13:20:19 发布

本地是好的

最新推荐文章于 2024-07-20 13:20:19 发布

阅读量3.2k

点赞数

分类专栏： Swiper

本文链接：https://blog.csdn.net/qq_40958876/article/details/103022550

版权

Swiper 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现效果，一个滑动的tab切换
在这里插入图片描述

 mounted() {
    var tabItem = $(".listButton");
    var mySwiperSchedule = new Swiper(".swiper-container", {
      // 高度自适应
      autoHeight: true,
      slidesPerView: "auto",
      autoplay: false,
      on: {
        //swiper从当前slide开始过渡到另一个slide时执行
        slideChangeTransitionStart: function() {
          var n = this.activeIndex; //过渡后的slide索引
          console.log(n);
          changeTab(n);
        }
      }
    });
    //tab点击切换silde
    tabItem.click(function() {
      var ind = $(this).index();
      changeTab(ind);
      mySwiper.slideTo(ind);
    });
    //tab切换样式
    function changeTab(index) {
      tabItem
        .removeClass("active")
        .eq(index)
        .addClass("active");
    }
    $(".listButton:first").addClass("active");
}