html实现tab 左右滑动

左右滑动 切换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=0var 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.activeIndexpage=1pageSate=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=truemySwiper.slideTo($index);//这是swiper 切换方法  $index是切换到第几个//setbuyerOderNum()//这是我请求 tab上面数字的接口}}})})