左右滑动 切换tab 并且给对应的tab加上样式 请求对应的数据
这里我是用swiper实现的
swiper的官网
下面直接上代码了
<div class="myIndentNav_div">
<ul class="myIndentNav">
<li class="active" data-id = "all">全部<span></span></li>
<li data-id="0">待付款<span></span><div class="obligation"></div></li>
<li data-id="8">待分享<span></span><div class="share"></div></li>
<li data-id="1">待发货<span></span><div class="drop_shipping"></div></li>
<li data-id="2">待收货<span></span><div class="wait_receiv"></div></li>
<li data-id="5">待评价<span></span><div class="evaluate"></div></li>
<li data-id="7">待自提<span></span><div class="pick"></div></li>
<li data-id="4">售后/退款<span></span><div class="after"></div></li>
<li data-id="3">已完成<span></span></li>
<li data-id="6">已关闭<span></span></li>
</ul>
</div>
<!--这是swiper模块 具体不讲解 可以看看官网-->
<div class="myIndentDiv">
<div id="indentModel">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
<div class="swiper-slide"></div>
</div>
</div>
</div>
</div>
样式 这边要让上面的导航是一排现实并且能滚动
.myIndentNav_div{
overflow: hidden;
height: .45rem;
position: fixed;
top: .4rem;
left: 0;
width: 100%;
z-index: 9999;
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom);
}
.myIndentNav{
width: 100%;
overflow-x: auto;
height: .45rem;
line-height: .45rem;
background: white;
float: left;
white-space: nowrap;
overflow-y: hidden;
display: flex;
}
.myIndentNav li{
padding: 0 .16rem;
float: left;
/* margin-left: .3rem; */
color: #0A0A0A;
position: relative;
font-size: .13rem;
}
//这是点击的样式
.myIndentNav .active{
color: #FA3B51;
}
.myIndentNav .active span{
width: .12rem;
height: .04rem;
display: block;
position: absolute;
left: 50%;
bottom: .02rem;
transform: translateX(-50%);
background: #FA3B51;
border-radius: .04rem;
}
//这是导航上数量的样式
.myIndentNav div{
display: none;
height: .16rem;
min-width: .16rem;
border-radius: .08rem;
text-align: center;
line-height: .16rem;
font-size: .12rem;
color: white;
background: #FA3B3B;
position: absolute;
top: 0.05rem;
right: 0.02rem;
padding: 0 .04rem;
box-sizing: border-box;
}
下面就是js代码 要实现两种效果 就是 手动滑动切换 和点击tab切换
//滑动模块切花
var $index=0
var page=1
$(function(){
var mySwiper = new Swiper('.swiper-container', {
centeredSlides: true,
paginationClickable: true,
nested:true,
on:{
slideChange: function(){
let left=$('.myIndentNav').scroll()[0].scrollWidth-$('.myIndentNav').width()
if(this.activeIndex>4){
$('.myIndentNav').animate({scrollLeft:left},500)
}else{
$('.myIndentNav').animate({scrollLeft:0},500)
}
status=$('.myIndentNav li').eq(this.activeIndex).attr('data-id')
$('.myIndentNav li').eq(this.activeIndex).addClass('active').siblings().removeClass('active')
$index=this.activeIndex
page=1
pageSate=true
$('#indentModel .swiper-slide').eq($index).html('')
$(document).scrollTop(0)
myIndentList()//这是切换后请求数据的方法
//setbuyerOderNum()//这是我请求 tab上面数字的接口
//加上定时器 防止快速点击切换
setTimeout(function(){
time=true
},500)
},
},
})
//点击tab切换
$('.myIndentNav li').click(function(){
//这是判断当前点击的是否是当前已显示的 如果不是才会执行下面的代码
if($(this).attr('data-id')!=status){
$('.swiper-container').css('height','100%')
if(time){
time= false;
$(this).addClass('active').siblings().removeClass('active')
$index=$(this).index()//获取当前点击的键值
status=$(this).attr('data-id')
$('#indentModel .swiper-slide').eq($index).html('')
page=1//页码
pageSate=true
mySwiper.slideTo($index);//这是swiper 切换方法 $index是切换到第几个
//setbuyerOderNum()//这是我请求 tab上面数字的接口
}
}
})
})