tab标签栏横向滑动的实现

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}>${t}</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'}]});