手势操作完全指南
FlowPage 最大的特色就是手势交互。掌握这些操作,阅读体验会非常流畅。
上下滑动:切换内容块
每个 ## 标题是一个内容块,占满一屏。
在手机上:
- 👆 向上滑:看下一块内容
- 👇 向下滑:回到上一块
自动捕捉: 滑动时会自动对齐到下一块,不会停在中间。
小技巧: 轻轻滑一下就够,不用用力滑。
左右滑动:切换页面
👈 向左滑:
- 打开推荐页
- 看相关文章列表
- 继续左滑可以直接跳到推荐的文章
👉 向右滑:
- 返回导航页
- 看所有文章分类
- 快速跳转到其他内容
这就像在翻书,左边是目录,右边是相关推荐。
边界翻页:连续阅读
这是 FlowPage 最酷的功能!
在文章顶部下拉:
- 自动跳到上一篇文章的末尾
- 就像翻开书的上一页
在文章底部上拉:
- 自动跳到下一篇推荐文章
- 继续无缝阅读
你可以一直滑下去,像刷信息流一样连续阅读!
快速跳转按钮
不想一块块滑动?用快速跳转!
左侧按钮:
- 点击跳到文章顶部
- 或跳到文章底部
- 平滑滚动过去
右侧按钮:
- 💜 点赞按钮(点了会变色)
- 📤 分享按钮
- 👤 查看作者信息
首页按钮:
- 左上角固定位置
- 随时回到首页
进度指示器
文章右侧有一排小点,显示当前位置:
- 每个点代表一个内容块
- 亮点是当前位置
- 点击可以直接跳转
适合快速浏览长文章。
文章切换提示
切换文章时,会显示新文章标题的提示框:
📄 新文章标题
2.5 秒后自动消失,不会挡住内容。
在电脑上使用
虽然 FlowPage 为移动端设计,但电脑也能用:
- 鼠标滚轮:切换内容块
- 点击右侧进度点:跳转
- 点击快速跳转按钮:到顶部/底部
但最佳体验还是在手机上!
调整手势灵敏度
觉得手势不够灵敏?
打开 src/components/BlockRenderer.astro,找到:
const SWIPE_THRESHOLD = 20; // 滑动距离阈值(像素)
const SWIPE_TIME_LIMIT = 800; // 滑动时间限制(毫秒)
- 减小
SWIPE_THRESHOLD:更容易触发 - 增大
SWIPE_TIME_LIMIT:慢速滑动也能识别
小技巧
- 多试几次:习惯后会很自然
- 轻滑即可:不用很用力
- 在真机测试:模拟器体验不如真机
- 给朋友试试:看看他们能不能直接上手
享受像翻书一样的流畅阅读体验!