fix: 修复移动端文件列表滑动问题
- 移除 touchstart 中的 event.preventDefault(),不再阻止默认滚动 - 添加 handleLongPressMove 方法检测手指移动 - 滑动超过 10px 时自动取消长按,允许正常滚动 - 为 grid 和 list 视图的文件项添加 @touchmove 事件 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -208,6 +208,9 @@ createApp({
|
||||
|
||||
// 长按检测
|
||||
longPressTimer: null,
|
||||
longPressStartX: 0,
|
||||
longPressStartY: 0,
|
||||
longPressFile: null,
|
||||
|
||||
// 媒体预览
|
||||
showImageViewer: false,
|
||||
@@ -1433,32 +1436,49 @@ handleDragLeave(e) {
|
||||
// 长按开始(移动端)
|
||||
handleLongPressStart(file, event) {
|
||||
if (file.isDirectory) return; // 文件夹不响应长按
|
||||
|
||||
// 阻止默认的长按行为(如文本选择)
|
||||
event.preventDefault();
|
||||
|
||||
|
||||
// 记录初始触摸位置,用于检测是否在滑动
|
||||
const touch = event.touches[0];
|
||||
this.longPressStartX = touch.clientX;
|
||||
this.longPressStartY = touch.clientY;
|
||||
this.longPressFile = file;
|
||||
|
||||
this.longPressTimer = setTimeout(() => {
|
||||
// 触发长按菜单
|
||||
this.contextMenuFile = file;
|
||||
|
||||
// 获取触摸点位置
|
||||
const touch = event.touches[0];
|
||||
this.contextMenuX = touch.clientX;
|
||||
this.contextMenuY = touch.clientY;
|
||||
|
||||
// 使用记录的触摸位置
|
||||
this.contextMenuX = this.longPressStartX;
|
||||
this.contextMenuY = this.longPressStartY;
|
||||
this.showContextMenu = true;
|
||||
|
||||
|
||||
// 触摸震动反馈(如果支持)
|
||||
if (navigator.vibrate) {
|
||||
navigator.vibrate(50);
|
||||
}
|
||||
|
||||
|
||||
// 点击其他地方关闭菜单
|
||||
this.$nextTick(() => {
|
||||
document.addEventListener('click', this.hideContextMenu, { once: true });
|
||||
});
|
||||
}, this.longPressDuration);
|
||||
},
|
||||
|
||||
|
||||
// 长按移动检测(移动端)- 滑动时取消长按
|
||||
handleLongPressMove(event) {
|
||||
if (!this.longPressTimer) return;
|
||||
|
||||
const touch = event.touches[0];
|
||||
const moveX = Math.abs(touch.clientX - this.longPressStartX);
|
||||
const moveY = Math.abs(touch.clientY - this.longPressStartY);
|
||||
|
||||
// 如果移动超过10px,认为是滑动,取消长按
|
||||
if (moveX > 10 || moveY > 10) {
|
||||
clearTimeout(this.longPressTimer);
|
||||
this.longPressTimer = null;
|
||||
}
|
||||
},
|
||||
|
||||
// 长按取消(移动端)
|
||||
handleLongPressEnd() {
|
||||
if (this.longPressTimer) {
|
||||
|
||||
Reference in New Issue
Block a user