Wekan移动端滚动优化与拖拽手柄使用指南

移动端滚动交互问题分析

在Android Chrome浏览器中使用Wekan时，用户常遇到"我的看板"列表滚动困难的问题。具体表现为：单指滑动容易误触看板卡片导致拖拽而非滚动，双指操作完全失效，且可滚动区域感知不明显。这是由于移动端视口限制与卡片式UI的交互冲突所致——当卡片元素占比较大时，浏览器难以区分用户的滚动意图与拖拽意图。

技术解决方案：启用拖拽手柄

Wekan提供了专门的拖拽手柄功能来解决此问题。该功能通过以下机制优化交互体验：

1. 视觉隔离
   在看板卡片左上角显示专用手柄图标，明确划分拖拽热区（仅手柄）与滚动热区（其他区域）。

2. 操作解耦

   • 拖拽行为：必须通过长按手柄触发
   • 滚动行为：在非手柄区域直接滑动即可

3. 响应式设计
   手柄在不同设备尺寸下自动调整触控区域大小，确保移动端可操作性。

配置与使用建议

1. 管理员配置
   在Wekan管理面板的"看板设置"中启用"显示拖拽手柄"选项，该设置对所有用户生效。

2. 用户操作指南

   • 垂直滚动：单指在卡片间隙或边缘空白处上下滑动
   • 看板排序：长按手柄图标后拖拽
   • 误操作恢复：松手后系统自动取消非手柄触发的拖拽

3. 性能优化
   对于包含大量看板的实例，建议结合"分页显示"功能使用，避免单页渲染过多元素影响滚动流畅度。

底层实现原理

Wekan采用动态事件监听策略：

• 移动端浏览器中，对手柄元素绑定touchstart事件
• 通过计算触点坐标与手柄位置的偏移量，决定是否阻止默认滚动行为
• 使用CSS touch-action属性控制滚动传播

该方案既保留了桌面端的操作习惯，又适配了移动端触控特性，是多终端协同场景下的有效折中方案。