fix: 手机左右滑动切换页面不生效 #43

Merged

fam merged 1 commits from fix/mobile-swipe-tabs into main 2026-04-16 14:02:20 +00:00

Conversation 2 Commits 1 Files Changed 1 +24 -12

fam commented 2026-04-16 13:34:59 +00:00

Contributor

Copy Link

根因

浏览器默认处理水平手势（iOS Safari 左滑后退、Chrome overscroll），抢在 JS touchend 之前消费了事件。

修复

• touch-action: pan-y 告诉浏览器只处理垂直滚动，水平留给 JS
• touchmove 实时跟踪手指位置，不再依赖 touchend.changedTouches（在某些浏览器中不可靠）
• touchstart 的 target 做 no-swipe 区域判断（移动后 target 可能变）
• 弹窗打开时跳过
• 阈值 50→60px 减少误触

## 根因 浏览器默认处理水平手势（iOS Safari 左滑后退、Chrome overscroll），抢在 JS touchend 之前消费了事件。 ## 修复 - `touch-action: pan-y` 告诉浏览器只处理垂直滚动，水平留给 JS - `touchmove` 实时跟踪手指位置，不再依赖 `touchend.changedTouches`（在某些浏览器中不可靠） - `touchstart` 的 target 做 no-swipe 区域判断（移动后 target 可能变） - 弹窗打开时跳过 - 阈值 50→60px 减少误触

fam added 1 commit 2026-04-16 13:34:59 +00:00

fix: 手机左右滑动切换 tab 不生效 ... bac5e0a26a

- 加 touch-action: pan-y 阻止浏览器抢占水平手势
- 用 touchmove 实时跟踪手指位置（比 touchend.changedTouches 更可靠）
- 用 touchstart 的 target 判断 no-swipe 区域（手指移动后 target 可能变）
- 弹窗/遮罩层打开时跳过滑动切换
- 阈值从 50px 调到 60px 减少误触

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

hera commented 2026-04-16 13:38:23 +00:00

Owner

Copy Link

🚀 Preview: https://pr-43.oil.oci.euphon.net

DB is a copy of production.

🚀 **Preview**: https://pr-43.oil.oci.euphon.net DB is a copy of production.

fam merged commit bac5e0a26a into main 2026-04-16 14:02:20 +00:00

hera commented 2026-04-16 14:02:35 +00:00

Owner

Copy Link

🗑️ Preview torn down.

🗑️ Preview torn down.

Sign in to join this conversation.

Reviewers

No Reviewers

Labels

No items

No Label

Milestone

No items

No Milestone

Projects

Clear projects

No project

Assignees

Clear assignees

yoyo hera

No Assignees

2 Participants

Notifications

Subscribe

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: hera/oil-formula-calculator#43