vue实现拖拽滚动
Vue 实现拖拽滚动的方法
在 Vue 中实现拖拽滚动功能，可以通过监听鼠标事件并结合 CSS 或 JavaScript 控制滚动行为。以下是几种常见的实现方式：
使用原生事件监听
通过监听 mousedown、mousemove 和 mouseup 事件，结合 scrollLeft 和 scrollTop 属性实现拖拽滚动。
<template>
<div
ref="scrollContainer"
class="scroll-container"
@mousedown="startDrag"
@mousemove="onDrag"
@mouseup="endDrag"
@mouseleave="endDrag"
>
<div class="content">
<!-- 可滚动内容 -->
</div>
</div>
</template>
<script>
export default {
data() {
return {
isDragging: false,
startX: 0,
startY: 0,
scrollLeft: 0,
scrollTop: 0,
};
},
methods: {
startDrag(e) {
this.isDragging = true;
this.startX = e.pageX;
this.startY = e.pageY;
this.scrollLeft = this.$refs.scrollContainer.scrollLeft;
this.scrollTop = this.$refs.scrollContainer.scrollTop;
},
onDrag(e) {
if (!this.isDragging) return;
const x = e.pageX;
const y = e.pageY;
const walkX = (this.startX - x) * 2; // 调整拖拽灵敏度
const walkY = (this.startY - y) * 2;
this.$refs.scrollContainer.scrollLeft = this.scrollLeft + walkX;
this.$refs.scrollContainer.scrollTop = this.scrollTop + walkY;
},
endDrag() {
this.isDragging = false;
},
},
};
</script>
<style>
.scroll-container {
overflow: auto;
cursor: grab;
}
.scroll-container:active {
cursor: grabbing;
}
</style>使用第三方库
如果需要更复杂的拖拽滚动功能，可以使用第三方库如 vue-draggable 或 sortablejs。
安装 sortablejs：
npm install sortablejs在 Vue 中使用：
<template>
<div ref="scrollContainer" class="scroll-container">
<div class="content">
<!-- 可拖拽滚动的内容 -->
</div>
</div>
</template>
<script>
import Sortable from 'sortablejs';
export default {
mounted() {
new Sortable(this.$refs.scrollContainer, {
animation: 150,
onStart: () => {
this.$refs.scrollContainer.style.cursor = 'grabbing';
},
onEnd: () => {
this.$refs.scrollContainer.style.cursor = 'grab';
},
});
},
};
</script>使用 CSS 属性
对于简单的拖拽滚动效果，可以直接使用 CSS 的 scroll-snap 属性实现平滑滚动。
<template>
<div class="scroll-container">
<div class="content">
<!-- 内容区块 -->
</div>
</div>
</template>
<style>
.scroll-container {
overflow-x: auto;
scroll-snap-type: x mandatory;
cursor: grab;
}
.content {
display: flex;
scroll-snap-align: start;
}
</style>注意事项
- 拖拽滚动时需注意性能问题，避免频繁触发
mousemove事件。 - 移动端适配可能需要额外处理触摸事件（
touchstart、touchmove、touchend）。 - 拖拽过程中可以添加过渡动画提升用户体验。
