vue实现点击左右按钮横向滚动

在这里插入图片描述

html部分
<div ref="tabHeaderRef" class="flex items-center tabs_header"><div class="tab-pre" v-if="hidePre" @click="leftPre"><i class="el-icon-arrow-left"></i></div><div ref="topListRef"  class="top-list"><div v-for="(item, i) in headerList" class="top-item"><span class="flex g-color-primary font-w-600 mb-4">{{ i }}	</span></div></div><div class="tab-next" v-if="hideNext" @click="rightNext"><i class="el-icon-arrow-right"></i></div></div>js部分
export default {data() {return {hidePre: false,hideNext: false,headerList: [1,2,3,4,5,6,7,8,9,10],}},methods: {isHideNext(){const tabHeaderWidth = this.$refs.tabHeaderRef.clientWidthconst topListScrollWidth = this.$refs.topListRef.scrollWidth if(topListScrollWidth > tabHeaderWidth){this.hideNext = true}else{this.hideNext = false}},leftPre() {let left = this.$refs.topListRef.scrollLeftconst width = this.$refs.topListRef.scrollWidth / this.headerList.lengththis.$refs.topListRef.scrollLeft = left -= widththis.hidePre = left > 0 ? true : falsethis.hideNext = true},rightNext() {const width = this.$refs.topListRef.scrollWidth / this.headerList.lengthconst el = this.$refs.topListReflet left = el.scrollLeftthis.$refs.topListRef.scrollLeft = left += widththis.hidePre = left > 0 ? true : falseif((left + el.clientWidth) > el.scrollWidth){this.hideNext = false}}},mounted(){this.$nextTick(() => {this.isHideNext()})}
}css部分.tabs_header {display: flex;align-items: center;position: relative;width: 100%;height: 70px;overflow: hidden;padding: 0 28px;.tab-pre,.tab-next {position: absolute;cursor: pointer;width: 28px;height: 70px;line-height: 70px;text-align: center;background-color: #f6f7f9;border: 1px solid #dae3ef;}.tab-pre {left: 0;top: 0;border-right: none;}.tab-next {right: 0;top: 0;border-left: none;}.top-list {display: flex;flex-wrap: nowrap;height: 100%;overflow-y: auto;&::-webkit-scrollbar {display: none;}.top-item {cursor: pointer;width: 180px;min-width: 180px;height: 100%;padding: 6px 8px;border-right: 1px solid #dae3ef;border-top: 1px solid #dae3ef;border-bottom: 1px solid #dae3ef;&:first-child {border-left: 1px solid #dae3ef;}}.top-item-active {color: #fff;background-color: #358efe;.g-color-primary {color: #fff;}}}}