swiper实现tab栏切换

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接： https://blog.csdn.net/hu_Time/article/details/101345693

作者：hu_time
描述：运用swiper进行实现的一个tab栏点击以及滑动切换效果

需要的包

jquery
swiper4.5.0.js
swiper.css

jquery官网
swiper.js包以及css包下载地址下载地址

html：

<!-- 点击按钮 -->
<div class="tab">
    <div class="tabItem active">全部</div>
    <div class="tabItem">待付款</div>
    <div class="tabItem">待发货</div>
    <div class="tabItem">待收货</div>
    <div class="tabItem">待评价</div>
</div>

<!-- 全部 -->
<div class="swiper-container">
    <div class="swiper-wrapper">
        <div class="swiper-slide" id="lanlist">全部</div>
        <div class="swiper-slide" id="fukuan">待付款</div>
        <div class="swiper-slide" id="ddfh">待发货</div>
        <div class="swiper-slide" id="qdsh">待收货</div>
        <div class="swiper-slide" id="ddpj">待评价</div>
    </div>
</div>

css:

.swiper-container,
.swiper-wrapper,
.swiper-slide {
    width: 100%;
}

.swiper-slide {
    display: flex;
    align-items:flex-start;
    justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 3rem;
}
/*切换按钮样式*/
.tab {
    width: 100%;
    height: 50px;
    overflow: hidden;
    border-bottom: 1px solid #eee;
    position: fixed;
    top: 2.5rem;
    left: 0;
    z-index: 999;
    background-color: #fff;
}

.tabItem {
    width: 20%;
    height: 50px;
    float: left;
    background: #fff;
    line-height: 50px;
    text-align: center;
}
/*切换按钮点击样式*/
.active {
    height: 50px;
    border-bottom: 3px solid #FE2D26;
    box-sizing: border-box;
  }

js:

var tabItem = $('.tab .tabItem');
 var mySwiper = new Swiper('.swiper-container', {
     autoplay: false,
     on: {
         //swiper从当前slide开始过渡到另一个slide时执行
         slideChangeTransitionStart: function () {
             //过渡后的slide索引
             var n = this.activeIndex;
             changeTab(n);
             // 切换的内容回到顶部
             $('html,body').animate({'scrollTop':0},10);
         }
     }
 })
 //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');
 }