vue + element 实现鼠标左右滑动效果

我用了element中的走马灯＋overflow-x: auto;

html （复制后格式化一下）

<div class="scroll" id="entrance"><el-carousel height="150px" :autoplay="false" :loop="false" arrow="always" ref="entrance"><el-carousel-item v-for="(item, index) in list" :key="index"><el-row><el-col :span="8" class=" header-particulars raod-parking"><div >{{item}}</div></el-col></el-row></el-carousel-item></el-carousel></div>.scroll {width: 100%;user-select: none;overflow-x: auto;white-space: nowrap;}

js

mounted() {this.entrance = document.querySelector('#entrance')
},methods：{// 左右滑动触发的切换prev() {this.$refs.entrance.prev();},next() {this.$refs.entrance.next();},slide(i) {var flag;var downX;i.addEventListener("mousedown", function (event) {flag = true;// 获取到点击的x下标downX = event.clientX;});var that = this;i.addEventListener("mousemove", function (event) {if (flag) {// 判断是否是鼠标按下滚动元素区域// 获取移动的x轴var moveX = event.clientX;// 当前移动的x轴下标减去刚点击下去的x轴下标得到鼠标滑动距离// 我这里就是根据这个值去判断是否切换的var scrollX = moveX - downX;// 左滑if (scrollX < 0) {if (scrollX < -150) {// 调用切换的方法that.next()// 切换完后 取消事件flag = false;}}if (scrollX > 0) {if (scrollX > 150) {that.prev(type)flag = false;}}}});// 鼠标抬起停止拖动i.addEventListener("mouseup", function () {flag = false;});// 鼠标离开元素停止拖动i.addEventListener("mouseleave", function (event) {flag = false;});},
}，
watch: {entrance(n) {// 监听 然后调用切换的方法this.slide(n)},
},

this.$refs.entrance.setActiveItem(index);

手动切换当前展示的索引