swiper实现tab栏切换

最新推荐文章于 2025-02-27 20:04:11 发布

hu_Time

最新推荐文章于 2025-02-27 20:04:11 发布

阅读量1.8k

点赞数 1

分类专栏： swiper 文章标签： tab栏切换 tab栏滑动切换滑动切换 swiper滑动切换

本文链接：https://blog.youkuaiyun.com/hu_Time/article/details/101345693

版权

swiper 专栏收录该内容

5 篇文章

订阅专栏

本文由hu_time作者撰写，介绍如何利用swiper.js实现Tab栏的点击及滑动切换效果。内容包括引入相关样式和文件，html结构，css样式以及javascript代码设置，特别强调了swiper-slide内的内容对于滑动切换的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

需要的包

jquery
swiper4.5.0.js
swiper.css

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

引入样式以及文件：

<link rel="stylesheet" href="../css/swiper/swiper4.5.0.css">
<script src="../js/jquery.js"></script>
<script src="../js/swiper/swiper-4.0.0.js"></script>

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');
 }