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=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上面数字的接口
				}
				
				
			}
		})
})