tab标签栏横向滑动的实现

绝绝子，虽然很菜，纠结了有些时间，但是总结出来了 ^ ^

js的封装函数

function tab(id,setting){
	var $box=$("#"+id);
	setting=$.extend({
		tabData:[]
	},setting)
	$box.append(`<div class="gdp_tapTop"><ul class="gdp_tabTitle"></ul></div><div class="gdp_tabContent"></div>`);
	
	$box.addClass("gdp_tabBox");
	$.each(setting.tabData,function(index){
		 $box.find(".gdp_tabTitle").append(`<li class="gdp_title${index+1}" index=${index}><span>${this.title}</span></li>`);
		 $box.find(".gdp_tabContent").append(`<div class="gdp_content${index+1}" index=${index}>${this.content}</div>`);
	   if(this.badge==0||!this.badge) return;
		// 设置圆圈
		$box.find(`.gdp_title${index+1}`).append(`<i class="gdp_badge">${this.badge}</i>`);
	    
	})
	var position={
		left:true,
		right:false
	}
	// 判断是否需要滚动，如果需要则设置滚动
	var acWidth=$box.find(".gdp_tabTitle")[0].scrollWidth;
	var viWidth=$box.find(".gdp_tabTitle")[0].offsetWidth;
	var scrollLeft=0,scrollLeft2=0,scrollLeft3=0;
	// 点击的id前后比较
	var clickLiArr=[0];
   // 绑定点击事件
   $box.find(".gdp_tabTitle li").on("click",function(e){
	var clickLi=this;
	var clickItemIndex=$(this).attr("index");
	clickLiArr.push(clickItemIndex);
	var distance=Number.parseInt($(this).offset().left-$box.find(".gdp_tabTitle").offset().left);
	 $box.find(".gdp_tabContent div").each(function(index){
		   if(clickItemIndex==index){
			$(this).siblings().css("display","none");
			$(this).css("display","block");
			 $box.find(`.gdp_title${Number.parseInt(clickItemIndex)+1} span`).css({
				"borderBottom":"2.5px solid #667dec",
				 "color":"#667dec"
			 });
			 $box.find(`.gdp_title${Number.parseInt(clickItemIndex)+1}`).siblings().find("span").css({
				 "borderBottom":"0px",
				 "color":"#000"
			 });
		   }
	 })
	// 实现滚动功能方向判断
	if(clickLiArr.length==3){
		clickLiArr.splice(0,1);
	}
	// 比较数组1和2值.如果2大于1向左滑,2小于1向右滑
	if(clickLiArr[0]<clickLiArr[1]){
			if(distance>Number.parseInt(viWidth/2)&& position.right!=true){
				scrollLeft=scrollLeft+distance-Number.parseInt(viWidth/2);
				$box.find(".gdp_tabTitle").animate({
					scrollLeft:scrollLeft
				},300)
			}
	}
	if(clickLiArr[0]>clickLiArr[1]){
		if(scrollLeft-(Number.parseInt(viWidth/2)-distance)<=0){
			 scrollLeft=0;
		}else{
			scrollLeft=scrollLeft-(Number.parseInt(viWidth/2)-distance)
		}
			$box.find(".gdp_tabTitle").animate({
			scrollLeft:scrollLeft
			},300)
	}
	// 滚动监听
	$box.find(".gdp_tabTitle").on("scroll",function(){
	var scroLeft=$(this)[0].scrollLeft;
	console.log("滑动的距离"+scrollLeft)
	if(scroLeft==0){
		position.right=false;
		position.left=true;
		return position;
	} else if(scroLeft==(acWidth-viWidth)){
		position.right=true;
		position.left=false;
		return  position;
	}else{
		position.right=false;
		position.left=false;
		return position;
	}
	})
	})	
}

css

*{
	margin:0px;
	padding:0px;
}
li{
	list-style:none;
}
/* tab滑动门start */
/* 让所有滚动消失 */
::-webkit-scrollbar {
	display: none;
}
.gdp_tabBox{
	height:579px;
	font-size:16px;
	margin:20px 24px;
}
.gdp_tapTop{
	overflow:hidden;
}
.gdp_tapTop ul{
	flex:1;
	display:flex;
	width:100%;
	overflow:scroll;
	text-align:center;
}
.gdp_tapTop ul li{
	flex:1;
	display:inline-block;
	margin:15px 0px;
	color:#323233;
	margin:10px 15px;
	white-space:nowrap;   /* 控制文字1行显示 */
}
.gdp_tapTop ul li span{
	 padding-bottom:7px;
}

.gdp_tapTop ul li:first-child span{
   border-bottom:2.5px solid #667dec;	
   color:#667dec;
}
.gdp_badge{
	background-color: #FB5B06;
	border-radius: 100px;
	padding: 1px 5px;
	line-height: 1;
	font-size: 12px;
	color: #fff;
	font-style: normal;
	vertical-align: super;
}
.gdp_tabTitle{
	
}
.gdp_tabContent{
	background-color: skyblue;
	margin:24px 20px;
}
.gdp_tabContent div{
	display:none;
}
.gdp_tabContent .gdp_content1{
	display:block;
}

使用

tab("typeTab",{tabData:[{'title':'标签1','content':'内容1'},{'title':'标签2','content':'内容2'},{'title':'标签3','content':'内容3'}]});