導(dǎo)言
本案例以列表滑動操作的速度判斷為例宙攻，使你掌握在 Protopie 中進(jìn)行操作判斷的主要思路和多種實(shí)現(xiàn)方式秕硝。
具體運(yùn)用場景
對于長列表來說掐场，我們一般會增加一個回到頂部的按鈕桩引，使用戶點(diǎn)擊后能夠直接回到首屏飞苇。一般情況下菌瘫，回到頂部按鈕是常駐的，在超出一屏?xí)r布卡，按鈕出現(xiàn)雨让，用戶需要時候，點(diǎn)擊即可返回頂部忿等。
如果說我們想要讓設(shè)計比用戶想得更早栖忠，就可以在列表界面在瀏覽超過一屏后，用戶進(jìn)行快速上滑時这弧，做出預(yù)判用戶有快速回到頂部的需求娃闲，這時界面才會出現(xiàn)回到頂部的圖標(biāo)按鈕，點(diǎn)擊后可以直接回到頂部匾浪。這樣回到頂部按鈕既不會遮擋界面顯示皇帮，也可以在用戶最需要的時候出現(xiàn)。
需要實(shí)現(xiàn)的效果
用戶做上滑操作時蛋辈，當(dāng)速度滿足一定條件時属拾，頁面的反饋與正常上滑的操作有所區(qū)分。
本案例中長列表當(dāng)滑動超過一屏后冷溶，快速向上滑動則出現(xiàn)回到頂部的圖標(biāo)渐白，點(diǎn)擊回到頂部。
? ? 此方案需要滿足的兩個判定條件：
? ? ○? 滑動距離超過一屏
? ? ○? 滑動速度超過X
方法一：使用Protopie的觸發(fā)
最簡單的方法是使用“快擲”的觸發(fā)（手指快速滑動圖層逞频，達(dá)到一定速度可以出發(fā)相應(yīng)動作）纯衍，但是“快擲”能改變的只有滑動方向，對于具體的速度無法自定義設(shè)置苗胀。
方法二：利用Protopie預(yù)定義變量
Protopie中有預(yù)定義獲取點(diǎn)擊后手指在屏幕上滑動的速度：
具體實(shí)現(xiàn)襟诸，在抬起時獲取用戶滑動速度（其中速度正負(fù)值表方向）瓦堵，并賦值給變量speed，監(jiān)聽speed的值歌亲，當(dāng)滿足speed>1500且滾頁超過一屏（滾頁>603）則回到頂部圖標(biāo)出現(xiàn)菇用。這樣具體有效速度的范圍便是可以調(diào)整的。
方法三：自定義參數(shù)計算
小爺自己算速度陷揪，具體實(shí)現(xiàn)步驟：
Step1：設(shè)置6個變量惋鸥，分別為time（計時器）；t1和t2（對應(yīng)下?lián)魰r時間及抬起時時間）悍缠；y1和y2（對應(yīng)下?lián)魰r及抬起時鼠標(biāo)或手指的在Y軸上的位置）卦绣；speed對應(yīng)用戶的操作速度。
Step2：變量time為數(shù)字變量扮休，添加自動加載觸發(fā)后賦值time迎卤，使用循環(huán)表達(dá)式time+0.1，即使用0.1秒為最小單位（可以自己設(shè)定）進(jìn)行計時玷坠。
Step3：t1和t2蜗搔，分別添加在下?lián)艉吞鸩僮飨拢蛊涞扔?b>time八堡。
Step4：y1和y2樟凄，分別添加在下?lián)艉吞鸩僮飨拢脩舨僮魑恢玫膟兄渺，使用表達(dá)式$mouseY?
Step5：在抬起操作下進(jìn)行speed計算：speed=(y2-y1)/(t2-t1)?（速度的正負(fù)值表示其在y軸上的方向）
（PS若方向不做考慮可以使用abs函數(shù)缝龄，abs是取絕對值的函數(shù)去除移動方向的限制）
Step6：最后添加監(jiān)聽，監(jiān)聽speed參數(shù)挂谍，使用條件當(dāng)滿足speed>1500且滾頁超過一屏（滾頁>603）則使得回到頂部圖標(biāo)出現(xiàn)叔壤。（這樣就不嫌事多的完成自己的計算）
案例拓展--用戶操作次數(shù)判斷的實(shí)現(xiàn)
速度可以判斷，那么用戶連續(xù)操作的次數(shù)呢?
若要將案例中的速度變?yōu)檫B續(xù)操作次數(shù)的判斷的話口叙，列表當(dāng)滑動超過一屏后連續(xù)兩次上滑則出現(xiàn)回到頂部的圖標(biāo)炼绘，點(diǎn)擊回到頂部。同樣參考實(shí)現(xiàn)方案三妄田，自己設(shè)定各個參數(shù)俺亮，做兩次連續(xù)上滑操作的判斷。
? ? 需要滿足的判定條件：
? ? ○? 滑動距離超過一屏
? ? ○? 存在兩次滑動操作時間差小于1s
? ? ○? 存在兩次滑動操作的滑動方向一致
具體實(shí)現(xiàn)步驟：
Step1：設(shè)置6個變量疟呐，分別是time（計時器）脚曾；t1和t2（分別為兩次操作的抬起的時間點(diǎn)）；y1和y2（分別對應(yīng)下?lián)魰r及抬起時鼠標(biāo)的在Y軸上的位置）启具；slidenumber對應(yīng)的連續(xù)操作的次數(shù)本讥。
Step2：其中time計時器與之前案例中一致，使用0.1秒為最小單位。
Step3：y1和y2囤踩，分別添加在下?lián)艉吞鸩僮飨轮冀罚脩舨僮魑恢玫膟，使用表達(dá)式$mouseY堵漱，若y2-y1>0則表示操作為上滑操作。
Step4：當(dāng)用戶抬起操作時涣仿，若操作計數(shù)slidenumber為0則將當(dāng)前的time賦值給t1勤庐；若操作計數(shù)slidenumber為1，則將當(dāng)前的time賦值給t2好港。
Step5：整個連續(xù)操作計數(shù)slidenumber的計數(shù)通過監(jiān)聽y2的值實(shí)現(xiàn)。
? ? ○? 當(dāng)y2-y1>0钧汹，slidenumber=0時丈探，將slidenumber賦值1，說明當(dāng)前出現(xiàn)一次有效上滑操作
? ? ○? 當(dāng)t2-t1≤1拔莱，y2-y1>0碗降，slidenumber=1時，將slidenumber賦值2塘秦，說明出現(xiàn)連續(xù)兩次上滑操作讼渊；一秒后將slidenumber恢復(fù)到初始值0
? ? ○? 當(dāng)t2-t1>1，y2-y1>0尊剔，slidenumber=1時爪幻，說明兩次操作不連貫，將slidenumber設(shè)置為1须误，并將t2值給到t1
? ? ○? 當(dāng)y2-y1<0時挨稿，向下滑動，將slidenumber恢復(fù)到0
Step6：最后添加監(jiān)聽京痢，監(jiān)聽slidenumber參數(shù)奶甘，使用條件當(dāng)滿足speed=2且滾頁超過一屏（滾頁>603），則回到頂部圖標(biāo)出現(xiàn)历造。
案例源文件下載&預(yù)覽
https://cloud.protopie.io/p/14e927bfe8
（需要下載源文件甩十，源文件中有四個不同場景，對應(yīng)“快擲”吭产、“速度判斷”*2侣监、“次數(shù)判斷”）
本篇教程作者：Annie；編輯 ：JJ?
