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

访客3年前黑客文章419

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

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

具体运用场景

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

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

需要实现的效果

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

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

案例源文件下载&预览:

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

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

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

滑动距离超过一屏;

滑动速度超过X。

使用Protopie的触发 之一种实现 ***

最简单的 *** 是使用“快掷”的触发(手指快速滑动图层,达到一定速度可以出发相应动作),但是“快掷”能改变的只有滑动方向,对于具体的速度无法自定义设置。

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

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

使用快掷触发的界面设置

利用Protopie预定义变量 第二种实现 ***

Protopie中有预定义获取点击后手指在屏幕上滑动的速度:

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

具体实现,在抬起时获取用户滑动速度(其中速度正负值表方向),并赋值给变量speed,监听speed的值,当满足speed>1500且滚页超过一屏(滚页>603)则回到顶部图标出现。这样具体有效速度的范围便是可以调整的。

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

使用预定义变量实现的界面设置

自定义参数计算 第三种实现方案(小爷自己算速度)

具体实现步骤:

Step1:设置6个变量,分别为time(计时器);t1t2(对应下击时时间及抬起时时间);y1y2(对应下击时及抬起时鼠标或手指的在Y轴上的位置);speed对应用户的操作速度。

Step2:变量time为数字变量,添加自动加载触发后赋值time,使用循环表达式time+0.1,即使用0.1秒为最小单位(可以自己设定)进行计时。

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

Step3:t1t2,分别添加在下击和抬起操作下,使其等于timeStep4:y1y2,分别添加在下击和抬起操作下,用户操作位置的y,使用表达式$mouseY

Step5:在抬起操作下进行speed计算:speed=(y2-y1)/(t2-t1)

(速度的正负值表示其在y轴上的方向)

PS. 若方向不做考虑可以使用abs函数,abs是取绝对值的函数去除移动方向的限制。

Step6:最后添加监听,监听speed参数,使用条件当满足speed>1500且滚页超过一屏(滚页>603)则使得回到顶部图标出现。(这样就不嫌事多的完成自己的计算)

相关文章

平台产品经理如何避免落为工具平台

平台产品经理如何避免落为工具平台

编辑导语:对付平台产物司理来说,很容易感受到事情枯燥乏味,此时就要鉴戒沦为东西平台的风险,而且要采纳正确的法子去改变近况。本文作者从实际履历出发,为我们解答了如何提高效率以及如何去赋能,让我们一起来思...

信息无障碍研究与应用「视觉篇」

信息无障碍研究与应用「视觉篇」

编辑导语:跟着互联网的成长,更多人会利用电子产物获取信息;许多产物开始没有意识障碍群体复杂的用户量,往往到了利用环节才呈现问题,所以信息无障碍成果已经成为了产物须要的思量环节;本文作者分享了关于信息无...

鹅组十年与中文互联网的娱乐代际

鹅组十年与中文互联网的娱乐代际

编辑导语:有爱豆可能常常混迹于娱乐圈的伴侣想必都看过可能传闻过鹅组,转眼间鹅组已经创立10年了。作为中文互联网流量最大的娱乐社区之一,号称吃瓜自由的鹅组经验了奈何的成长过程呢?又是奈何脱颖而出,有了此...

Axure教程:高保真的上传效果(图片、文件)

Axure教程:高保真的上传效果(图片、文件)

今天教大家怎么做一个高保真的上传图片、文件的效果。该原型用中继器做的,所以使用的时候只需要简单填写表格内容即可,也可以当做学习中继器交互的案例。如有喜欢该原型或者有什么疑问的都可以在评论区留言。 为...

为什么长文网站需要点击“阅读更多”,才能看到全部内容?

为什么长文网站需要点击“阅读更多”,才能看到全部内容?

在长文网站阅读文章时,你是否遇到过这样的设计:文章阅读几段后,需要点击“阅读更多”的按钮,才能阅读全文。 在实际体验中,你喜欢这样的设计吗?为什么长文网站需要点击“阅读更多”,才能看到全部内容呢?...

数据分析师必看:双十一分析备战手册

数据分析师必看:双十一分析备战手册

编辑导读:双十一顿时就要来了,忙起来的不仅是正在计较优惠折扣的消费者,尚有数据阐明师。双十一作为一个概略量的营销勾当,只有提前做好筹备才气不慌不忙。本文将从六个方面,总结数据阐明师应该做哪些筹备,但愿...