本案例会用列表滑动操作的速度判断为例,教会你在Protopie中进行操作判断的主要思路和多种实现方式。

具体运用场景
对于长列表来说,我们一般会增加一个回到顶部的按钮,使用户点击后能够直接回到首屏。一般情况下,回到顶部按钮是常驻的,在超出一屏时,按钮出现,用户需要时候,点击即可返回顶部。
如果说我们想要让设计比用户想得更早,就可以在列表界面在浏览超过一屏后,用户进行快速上滑时,做出预判用户有快速回到顶部的需求,这时界面才会出现回到顶部的图标按钮,点击后可以直接回到顶部。这样回到顶部按钮既不会遮挡界面显示,也可以在用户最需要的时候出现。
需要实现的效果
用户做上滑操作时,当速度满足一定条件时,页面的反馈与正常上滑的操作有所区分。本案例实现动态效果:

案例源文件下载&预览:
https://cloud.protopie.io/p/14e927bfe8(需要下载源文件,源文件中有四个不同场景,对应“快掷”、“速度判断”*2、“次数判断”)
本案例中长列表当滑动超过一屏后,快速向上滑动则出现回到顶部的图标,点击回到顶部。
此方案需要满足的两个判定条件:
- 滑动距离超过一屏;
- 滑动速度超过X。
闽ICP备13000641号-4