点击左右箭头实现内容滑动

实现效果：
1、通过点击左右箭头实现内容滑动
2、点击＋添加标签
3、点击×删除标签
4、点击标签
实现思路：
1、position布局

1 、通过点击左右箭头实现内容滑动

代码：
html

<!-- 可滑动区域和操作可滑动区域的icon --><div class="scrollTab"><i class="el-icon-caret-left" @click="leftClick"></i><!-- 显示的区域 --><div id="classifyScroll"><!-- 滑动的区域 --><div class="classifys"><!-- 单个标签 --><divclass="classifys-item":class="index == currentFlowIndex ? 'classifys-activeItem' : 'classifys-item'"v-for="(item, index) in flowList":key="index":ref="`item${index}`"@click="changeFlow(item, index)"@dblclick="changeCurrentFlow(item, index)"><p>{{ item.backEnd.name ? item.backEnd.name : '空白页' }}</p><i class="el-icon-close" @click.stop="closeFlowList(index)"></i></div></div></div><i class="el-icon-plus" style="font-weight:500;" @click="addFlowList"></i><i class="el-icon-caret-right" @click="rightClick"></i></div>

scss

.scrollTab {width: calc(100% - 170px);display: flex;justify-content: space-between;align-items: center;margin-left: 170px;#classifyScroll {width: calc(100% - 45px);height: 36px;overflow: hidden;transition: all 0.3s;position: relative;display: flex;justify-content: flex-start;align-items: center;.classifys {position: absolute;left: 0px;height: 36px;transition: all 0.3s;width: auto;display: flex;align-items: center;background: #f0f0f0;&-item {width: 140px;font-size: 15px;font-weight: 400;color: #000;padding: 8px 0px 8px 6px;box-sizing: border-box;background: #f0f0f0;display: flex;justify-content: space-between;align-items: center;> p {width: 140px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}> i {margin-right: 8px;}> i:hover {cursor: pointer;}}&-activeItem {background: #fff;// border-top-right-radius: 10px;}&-item:hover {cursor: pointer;}}}
}

js
点击左箭头

leftClick() {// 在点击的时候判断可滑动区域的left是否大于-20（因为我在左右点击的时候每次移动20px，所以需要判断是否大于20；）// 小于：直接将left设置为0// 大于：left则加20if (document.getElementsByClassName('classifys')[0].offsetLeft >= -20) {document.getElementsByClassName('classifys')[0].style.left = 0 + 'px';} else {document.getElementsByClassName('classifys')[0].style.left = document.getElementsByClassName('classifys')[0].offsetLeft + 20 + 'px';}
}

点击右箭头

rightClick() {// 在点击的时候判断可滑动区域的left+可视区域的宽度是否大于可滑动区域的宽度// 大于：则left为可视区域的宽度-可滑动区域的宽度// 小于：当前的可滑动区域的left-20即可if (document.getElementsByClassName('classifys')[0].scrollWidth +document.getElementsByClassName('classifys')[0].offsetLeft -20 <=document.getElementById('classifyScroll').offsetWidth) {document.getElementsByClassName('classifys')[0].style.left =document.getElementById('classifyScroll').offsetWidth -document.getElementsByClassName('classifys')[0].scrollWidth +'px';} else {document.getElementsByClassName('classifys')[0].style.left =document.getElementsByClassName('classifys')[0].offsetLeft - 20 + 'px';}}

2、点击＋添加标签

此处需要注意的是，在添加标签的时候，可滑动区域的left应该为多少
判断：如果可滑动区域的宽度大于了可显示的区域，那么可滑动区域的left=可显示区域的宽度-可滑动区域的宽度

if (document.getElementsByClassName('classifys')[0].scrollWidth > document.getElementById('classifyScroll').offsetWidth) {document.getElementsByClassName('classifys')[0].style.left =document.getElementById('classifyScroll').offsetWidth -document.getElementsByClassName('classifys')[0].scrollWidth +'px';
}

3、点击×删除标签

此处需要注意的与添加标签时碰到的问题类似
判断：
（1）如果可滑动区域的宽度小于可显示的区域，那么可滑动区域的left= 0px
（2）如果可滑动区域的宽度大于可显示的区域，那么可滑动区域的left=当前的可滑动区域的left+140 + ‘px’。因为我给标签设置的宽度为140px，如果删除一个标签，那么理应给left+140

if (document.getElementsByClassName('classifys')[0].scrollWidth <= document.getElementById('classifyScroll').offsetWidth) {document.getElementsByClassName('classifys')[0].style.left = 0 + 'px';
} else {document.getElementsByClassName('classifys')[0].style.left =document.getElementsByClassName('classifys')[0].offsetLeft + 140 + 'px';
}

4、点击标签

此处需要注意的是在点击标签时，如果标签现在一半显示一半未显示，那么可滑动区域的left该怎么设置呢
标签的一半显示和一般未显示分为两种情况：

第一个红框圈起来的则为前半部分未显示，后半部分显示的情况
第二个红框圈起来的则为后半部分未显示，前半部分显示的情况
下方出现的index为当前点击的标签在数组中的位置
判断一：index*140 < 可滑动区域的left的值，那么证明，这个标签前半部分是被隐藏的，所以在点击它的时候，需要把前半部分显示出来，所以将可滑动区域的left设置为 index * -140 + ‘px’
判断二：(index+1)*140 > 可滑动区域的left + 可显示区域的宽度，那么证明在，这个标签的后半部分是被隐藏的，所以在点击它的时候，需要把后半部分显示出来，所以将可滑动区域的left设置为document.getElementById(‘classifyScroll’).offsetWidth - (index + 1) * -140 + ‘px’

if (document.getElementsByClassName('classifys')[0].scrollWidth > document.getElementById('classifyScroll').offsetWidth) {if (index * 140 < Math.abs(document.getElementsByClassName('classifys')[0].offsetLeft)) {document.getElementsByClassName('classifys')[0].style.left = index * -140 + 'px';} else if ((index + 1) * 140 >document.getElementById('classifyScroll').offsetWidth -document.getElementsByClassName('classifys')[0].offsetLeft) {document.getElementsByClassName('classifys')[0].style.left =document.getElementById('classifyScroll').offsetWidth - (index + 1) * 140 + 'px';}
}

有问题欢迎来问！！！