vue + element 实现鼠标左右滑动效果
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);
手动切换当前展示的索引
更多推荐
已为社区贡献2条内容
所有评论(0)