您现在的位置:   首页 >> 新闻中心 >> 原型设计

ProtoPie进阶教程:列表滑动的操作判断

发布人:www.yunke.ai 发布时间:2021-01-01 142 次浏览

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

具体运用场景

对于长列表来说,我们一般会增加一个回到顶部的按钮,使用户点击后能够直接回到首屏。一般情况下,回到顶部按钮是常驻的,在超出一屏时,按钮出现,用户需要时候,点击即可返回顶部。

如果说我们想要让设计比用户想得更早,就可以在列表界面在浏览超过一屏后,用户进行快速上滑时,做出预判用户有快速回到顶部的需求,这时界面才会出现回到顶部的图标按钮,点击后可以直接回到顶部。这样回到顶部按钮既不会遮挡界面显示,也可以在用户最需要的时候出现。

需要实现的效果

用户做上滑操作时,当速度满足一定条件时,页面的反馈与正常上滑的操作有所区分。本案例实现动态效果:

Protopie教程2-列表滑动的操作判断

案例源文件下载&预览:

https://cloud.protopie.io/p/14e927bfe8(需要下载源文件,源文件中有四个不同场景,对应“快掷”、“速度判断”*2、“次数判断”)

本案例中长列表当滑动超过一屏后,快速向上滑动则出现回到顶部的图标,点击回到顶部。

此方案需要满足的两个判定条件:

  • 滑动距离超过一屏;
  • 滑动速度超过X。

使用Protopie的触发