内容简介:本案例会用列表滑动操作的速度判断为例,教会你在Protopie中进行操作判断的主要思路和多种实现方式。对于长列表来说,我们一般会增加一个回到顶部的按钮,使用户点击后能够直接回到首屏。一般情况下,回到顶部按钮是常驻的,在超出一屏时,按钮出现,用户需要时候,点击即可返回顶部。
本案例会用列表滑动操作的速度判断为例,教会你在Protopie中进行操作判断的主要思路和多种实现方式。
具体运用场景
对于长列表来说,我们一般会增加一个回到顶部的按钮,使用户点击后能够直接回到首屏。一般情况下,回到顶部按钮是常驻的,在超出一屏时,按钮出现,用户需要时候,点击即可返回顶部。
如果说我们想要让设计比用户想得更早,就可以在列表界面在浏览超过一屏后,用户进行快速上滑时,做出预判用户有快速回到顶部的需求,这时界面才会出现回到顶部的图标按钮,点击后可以直接回到顶部。这样回到顶部按钮既不会遮挡界面显示,也可以在用户最需要的时候出现。
需要实现的效果
用户做上滑操作时,当速度满足一定条件时,页面的反馈与正常上滑的操作有所区分。本案例实现动态效果:
案例源文件下载&预览:
https://cloud.protopie.io/p/14e927bfe8 (需要下载源文件,源文件中有四个不同场景,对应“快掷”、“速度判断”*2、“次数判断”)
本案例中长列表当滑动超过一屏后,快速向上滑动则出现回到顶部的图标,点击回到顶部。
此方案需要满足的两个判定条件:
- 滑动距离超过一屏;
- 滑动速度超过X。
使用Protopie的触发
第一种实现方法
最简单的方法是使用 “快掷” 的触发(手指快速滑动图层,达到一定速度可以出发相应动作),但是 “快掷” 能改变的只有滑动方向,对于具体的速度无法自定义设置。
使用快掷触发的界面设置
利用Protopie预定义变量
第二种实现方法
Protopie中有预定义获取点击后手指在屏幕上滑动的速度:
具体实现,在抬起时获取用户滑动速度(其中速度正负值表方向),并赋值给变量speed,监听speed的值,当满足speed>1500且滚页超过一屏(滚页>603)则回到顶部图标出现。这样具体有效速度的范围便是可以调整的。
使用预定义变量实现的界面设置
自定义参数计算
第三种实现方案(小爷自己算速度)
具体实现步骤:
Step1:设置6个变量,分别为 time (计时器); t1 和 t2 (对应下击时时间及抬起时时间); y1 和 y2 (对应下击时及抬起时鼠标或手指的在Y轴上的位置); speed 对应用户的操作速度。
Step2:变量 time 为数字变量,添加自动加载触发后赋值time,使用循环表达式 time+0.1 ,即使用0.1秒为最小单位(可以自己设定)进行计时。
Step3:t1和 t2 ,分别添加在下击和抬起操作下,使其等于 time 。 Step4:y1 和 y2 ,分别添加在下击和抬起操作下,用户操作位置的y,使用表达式 $mouseY
Step5:在抬起操作下进行 speed 计算: speed=(y2-y1)/(t2-t1)
(速度的正负值表示其在y轴上的方向)
PS. 若方向不做考虑可以使用abs函数,abs是取绝对值的函数去除移动方向的限制。
Step6:最后添加监听,监听 speed 参数,使用条件当满足 speed>1500 且滚页超过一屏(滚页>603)则使得回到顶部图标出现。(这样就不嫌事多的完成自己的计算)
使用自定义变量计算速度的界面设置
案例拓展
用户操作次数判断的实现。
速度可以判断,那么用户连续操作的次数呢?若要将案例中的速度变为连续操作次数的判断的话,列表当滑动超过一屏后连续两次上滑则出现回到顶部的图标,点击回到顶部。同样参考实现方案三,自己设定各个参数,做两次连续上滑操作的判断。
需要满足的判定条件:
- 滑动距离超过一屏;
- 存在两次滑动操作时间差小于1s;
- 存在两次滑动操作的滑动方向一致。
具体实现步骤:
Step1:设置6个变量,分别是 time (计时器); t1 和 t2 (分别为两次操作的抬起的时间点); y1 和 y2 (分别对应下击时及抬起时鼠标的在Y轴上的位置); slidenumber 对应的连续操作的次数。
Step2:其中 time 计时器与之前案例中一致,使用0.1秒为最小单位。
Step3:y1和 y2 ,分别添加在下击和抬起操作下,用户操作位置的y,使用表达式 $mouseY ,若y2-y1>0则表示操作为上滑操作。
Step4:当用户抬起操作时,若操作计数 slidenumber 为0则将当前的 time 赋值给t1;若操作计数 slidenumber 为1,则将当前的 time 赋值给 t2。
Step5:整个连续操作计数 slidenumber 的计数通过监听 y2 的值实现。
- 当y2-y1>0,slidenumber=0时,将slidenumber赋值1,说明当前出现一次有效上滑操作;
- 当t2-t1≤1,y2-y1>0,slidenumber=1时,将slidenumber赋值2,说明出现连续两次上滑操作;一秒后将slidenumber恢复到初始值0;
- 当t2-t1>1,y2-y1>0,slidenumber=1时,说明两次操作不连贯,将slidenumber设置为1,并将t2值给到t1;
- 当y2-y1<0时,向下滑动,将slidenumber恢复到0。
Step6:最后添加监听,监听 slidenumber 参数,使用条件当满足speed=2且滚页超过一屏(滚页>603),则回到顶部图标出现。
判断用户滑动次数的界面设置
本文由 @二楼自习室 原创发布于人人都是产品经理。未经许可,禁止转载
题图来自Unsplash,基于CC0协议
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Jupyter 进阶教程
- Go 语言测试进阶教程
- ProtoPie进阶教程1-3:计时器
- ProtoPie进阶教程:随机函数的学习及应用
- 【Python】NumPy快餐教程(2) - 多维数组进阶
- Python3多线程爬虫实例讲解 - Python高级教程- Python进阶|Scrapy教程|Python高级|Python深入
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
深入理解Nginx
陶辉 / 机械工业出版社 / 2013-4-15 / 89.00元
本书是阿里巴巴资深Nginx技术专家呕心沥血之作,是作者多年的经验结晶,也是目前市场上唯一一本通过还原Nginx设计思想,剖析Nginx架构来帮助读者快速高效开发HTTP模块的图书。 本书首先通过介绍官方Nginx的基本用法和配置规则,帮助读者了解一般Nginx模块的用法,然后重点介绍如何开发HTTP模块(含HTTP过滤模块)来得到定制的Nginx,其中包括开发一个功能复杂的模块所需要了解的......一起来看看 《深入理解Nginx》 这本书的介绍吧!