vue + element 实现鼠标左右滑动效果-Toy模板网

这篇具有很好参考价值的文章主要介绍了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)
	},
},