版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
作者: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');
}