验证中...
10月20日,北京【人工智能】源创会火热报名中,点击报名收获 AI 训练指南
片段 1 片段 2
index.html
原始数据 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>带有箭头的横向滚动tab</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{list-style: none;}
#tab_box {
position: relative;
padding: 20px;
}
#tab_list {
line-height: 30px;
font-size: 15px;
color: #b59243;
text-align: center;
overflow: auto;
white-space: nowrap;
}
#tab_box span {
display: inline-block;
width: 20px;
height: 30px;
line-height: 30px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
}
#tab_left {
background-color: #f00;
left: 2px;
}
#tab_right {
background-color: #00f;
right: 2px;
}
#tab_list li {
display: inline-block;
width: 100px;
margin: 0 4px;
border: 1px solid #b59243;
border-radius: 5px;
}
.readme{
padding: 20px;
line-height: 30px
}
.readme p,.readme li{
font-size: 14px;
}
</style>
</head>
<body>
<div id="tab_box">
<span id="tab_left">顶</span>
<ul id="tab_list">
<li>全部</li>
<li>表情</li>
<li>房卡</li>
<li>实物</li>
</ul>
<span id="tab_right">尾</span>
</div>
<div class="readme">
<h3>说明文档:</h3>
<p>需求:需要添加一个滑动的tab切换:</p>
<ul>
<li>1. tab可以滑动</li>
<li>2. 带有左右箭头提示</li>
<li>3. 不需要滑动的时候tab列表居中显示切隐藏箭头</li>
<li>4. 点击左箭头tab回到顶端,点击右箭头tab回到底端</li>
<li>5. 当tab在顶端时显示右箭头,左箭头隐藏</li>
<li>6. 当tab在底端时显示左箭头,右箭头隐藏</li>
<li>7. 当tab在中间时,两个箭头都显示</li>
</ul>
<p>设计思路请参考js注释</p>
</div>
<script>
class slideTab {
constructor() {
this.tabBoxELE = document.querySelector('#tab_box'); // tab盒子标签
this.tabLeftELE = document.querySelector('#tab_left'); // tab左箭头标签
this.tabELE = document.querySelector('#tab_list'); // tab列表Ul
this.tabLiELE = document.querySelectorAll('#tab_list li'); // tab列表Li
this.tabRightELE = document.querySelector('#tab_right'); // tab右箭头标签
this.init()
}
init(){
let liLength = this.tabLiELE.length;
//针对左右边距相等
let liMarginWidth = parseInt(window.getComputedStyle(this.tabLiELE[0]).marginLeft)*2;
// 单个li所占空间 = li本身大小 + li的左右margin值
this.tabLiAllWitch = (this.tabLiELE[0].offsetWidth+liMarginWidth)*liLength; // li的总长度
this.tabWitch = this.tabELE.offsetWidth; // tab盒子的长度
this.slidetab(); // 初始化tab状态
//添加事件
this.tabLeftELE.addEventListener("click",()=>{this.gotabLeft()},false);
this.tabELE.addEventListener("touchmove",()=>{this.slidetab()},false);
this.tabRightELE.addEventListener("click",()=>{this.gotabRight()},false);
}
gotabLeft() {
this.tabELE.scrollLeft = 0;
this.setAwwows('none','block');
}
slidetab() {
let left = this.tabELE.scrollLeft; // 当前滚动条的偏移量
let slideLeft = this.maxSlide || (this.tabLiAllWitch - this.tabWitch); // 最大精确偏移量||最小偏移量
// 判断箭头显示状态
if(this.tabLiAllWitch <= this.tabWitch) this.setAwwows() // 不产生滚动条 不显示箭头
else if(left === 0) this.setAwwows('none','block') // 滑动在最左端 左箭头隐藏右箭头显示
else if(left >= slideLeft) this.gotabRight() // 滑动在最右端 右箭头隐藏左箭头显示
else this.setAwwows('block','block') // 滑动在中间 显示所有箭头
}
gotabRight() {
// 此处没有标准的数值只要大于滚动条距离最右端的最大距离即可
this.tabELE.scrollLeft = this.tabLiAllWitch; // 初始化让其最大
this.maxSlide = this.tabELE.scrollLeft; // 设置最大精确偏移量
this.setAwwows('block','none')
}
setAwwows(left='none',right='none'){
this.tabLeftELE.style.display = left;
this.tabRightELE.style.display = right;
}
}
new slideTab()
</script>
<script>
/**注意事项在vue中的使用
* mounted(){
* let navWitch = parseInt(window.getComputedStyle(this.$refs.navLi[0]).width)+8;
* this.navBoxWitch = navWitch*this.$refs.navLi.length;
* this.slideNav()
* // this.navBoxWitch = (this.$refs.navLi[0].offsetWidth + 8)*this.$refs.navLi.length;
* },
* 1. 在mounted生命周期中不能获取到元素的offsetWidth,可以通过上面方式直接获取css中设置的宽
* 2. 设置箭头显示隐藏的时候不要使用v-if ,可以使用 v-show
*/
</script>
</body>
</html>
效果展示.gif

评论列表( 1 )

1329024_hjm100
鸿基梦 2018-10-11 16:19

你可以在登录后,发表评论

搜索帮助