本案例會(huì)用列表滑動(dòng)操作的速度判斷為例，教會(huì)你在Protopie中進(jìn)行操作判斷的主要思路和多種實(shí)現(xiàn)方式。

具體運(yùn)用場(chǎng)景

對(duì)于長(zhǎng)列表來說，我們一般會(huì)增加一個(gè)回到頂部的按鈕，使用戶點(diǎn)擊后能夠直接回到首屏。一般情況下，回到頂部按鈕是常駐的，在超出一屏?xí)r，按鈕出現(xiàn)，用戶需要時(shí)候，點(diǎn)擊即可返回頂部。

如果說我們想要讓設(shè)計(jì)比用戶想得更早，就可以在列表界面在瀏覽超過一屏后，用戶進(jìn)行快速上滑時(shí)，做出預(yù)判用戶有快速回到頂部的需求，這時(shí)界面才會(huì)出現(xiàn)回到頂部的圖標(biāo)按鈕，點(diǎn)擊后可以直接回到頂部。這樣回到頂部按鈕既不會(huì)遮擋界面顯示，也可以在用戶最需要的時(shí)候出現(xiàn)。

需要實(shí)現(xiàn)的效果

用戶做上滑操作時(shí)，當(dāng)速度滿足一定條件時(shí)，頁面的反饋與正常上滑的操作有所區(qū)分。本案例實(shí)現(xiàn)動(dòng)態(tài)效果：

案例源文件下載&預(yù)覽：

https://cloud.protopie.io/p/14e927bfe8（需要下載源文件，源文件中有四個(gè)不同場(chǎng)景，對(duì)應(yīng)“快擲”、“速度判斷”*2、“次數(shù)判斷”）

本案例中長(zhǎng)列表當(dāng)滑動(dòng)超過一屏后，快速向上滑動(dòng)則出現(xiàn)回到頂部的圖標(biāo)，點(diǎn)擊回到頂部。

此方案需要滿足的兩個(gè)判定條件：

• 滑動(dòng)距離超過一屏；
• 滑動(dòng)速度超過X。

使用Protopie的觸發(fā)

第一種實(shí)現(xiàn)方法

最簡(jiǎn)單的方法是使用“快擲”的觸發(fā)（手指快速滑動(dòng)圖層，達(dá)到一定速度可以出發(fā)相應(yīng)動(dòng)作），但是“快擲”能改變的只有滑動(dòng)方向，對(duì)于具體的速度無法自定義設(shè)置。

使用快擲觸發(fā)的界面設(shè)置

利用Protopie預(yù)定義變量

第二種實(shí)現(xiàn)方法

Protopie中有預(yù)定義獲取點(diǎn)擊后手指在屏幕上滑動(dòng)的速度：

具體實(shí)現(xiàn)，在抬起時(shí)獲取用戶滑動(dòng)速度（其中速度正負(fù)值表方向），并賦值給變量speed，監(jiān)聽speed的值，當(dāng)滿足speed>1500且滾頁超過一屏（滾頁>603）則回到頂部圖標(biāo)出現(xiàn)。這樣具體有效速度的范圍便是可以調(diào)整的。

使用預(yù)定義變量實(shí)現(xiàn)的界面設(shè)置

自定義參數(shù)計(jì)算

第三種實(shí)現(xiàn)方案（小爺自己算速度）

具體實(shí)現(xiàn)步驟：

Step1：設(shè)置6個(gè)變量，分別為time（計(jì)時(shí)器）；t1和t2（對(duì)應(yīng)下?lián)魰r(shí)時(shí)間及抬起時(shí)時(shí)間）；y1和y2（對(duì)應(yīng)下?lián)魰r(shí)及抬起時(shí)鼠標(biāo)或手指的在Y軸上的位置）；speed對(duì)應(yīng)用戶的操作速度。

Step2：變量time為數(shù)字變量，添加自動(dòng)加載觸發(fā)后賦值time，使用循環(huán)表達(dá)式time+0.1，即使用0.1秒為最小單位（可以自己設(shè)定）進(jìn)行計(jì)時(shí)。

Step3：t1和t2，分別添加在下?lián)艉吞鸩僮飨拢蛊涞扔?strong>time。Step4：y1和y2，分別添加在下?lián)艉吞鸩僮飨?，用戶操作位置的y，使用表達(dá)式$mouseY

Step5：在抬起操作下進(jìn)行speed計(jì)算：speed=(y2-y1)/(t2-t1)

（速度的正負(fù)值表示其在y軸上的方向）

PS. 若方向不做考慮可以使用abs函數(shù)，abs是取絕對(duì)值的函數(shù)去除移動(dòng)方向的限制。

Step6：最后添加監(jiān)聽，監(jiān)聽speed參數(shù)，使用條件當(dāng)滿足speed>1500且滾頁超過一屏（滾頁>603）則使得回到頂部圖標(biāo)出現(xiàn)。（這樣就不嫌事多的完成自己的計(jì)算）

使用自定義變量計(jì)算速度的界面設(shè)置

案例拓展

用戶操作次數(shù)判斷的實(shí)現(xiàn)。

速度可以判斷，那么用戶連續(xù)操作的次數(shù)呢？若要將案例中的速度變?yōu)檫B續(xù)操作次數(shù)的判斷的話，列表當(dāng)滑動(dòng)超過一屏后連續(xù)兩次上滑則出現(xiàn)回到頂部的圖標(biāo)，點(diǎn)擊回到頂部。同樣參考實(shí)現(xiàn)方案三，自己設(shè)定各個(gè)參數(shù)，做兩次連續(xù)上滑操作的判斷。

需要滿足的判定條件：

• 滑動(dòng)距離超過一屏；
• 存在兩次滑動(dòng)操作時(shí)間差小于1s；
• 存在兩次滑動(dòng)操作的滑動(dòng)方向一致。

具體實(shí)現(xiàn)步驟：

Step1：設(shè)置6個(gè)變量，分別是time（計(jì)時(shí)器）；t1和t2（分別為兩次操作的抬起的時(shí)間點(diǎn)）；y1和y2（分別對(duì)應(yīng)下?lián)魰r(shí)及抬起時(shí)鼠標(biāo)的在Y軸上的位置）；slidenumber對(duì)應(yīng)的連續(xù)操作的次數(shù)。

Step2：其中time計(jì)時(shí)器與之前案例中一致，使用0.1秒為最小單位。

Step3：y1和y2，分別添加在下?lián)艉吞鸩僮飨拢脩舨僮魑恢玫膟，使用表達(dá)式$mouseY，若y2-y1>0則表示操作為上滑操作。

Step4：當(dāng)用戶抬起操作時(shí)，若操作計(jì)數(shù)slidenumber為0則將當(dāng)前的time賦值給t1；若操作計(jì)數(shù)slidenumber為1，則將當(dāng)前的time賦值給t2。

Step5：整個(gè)連續(xù)操作計(jì)數(shù)slidenumber的計(jì)數(shù)通過監(jiān)聽y2的值實(shí)現(xiàn)。

• 當(dāng)y2-y1>0，slidenumber=0時(shí)，將slidenumber賦值1，說明當(dāng)前出現(xiàn)一次有效上滑操作；
• 當(dāng)t2-t1≤1，y2-y1>0，slidenumber=1時(shí)，將slidenumber賦值2，說明出現(xiàn)連續(xù)兩次上滑操作；一秒后將slidenumber恢復(fù)到初始值0；
• 當(dāng)t2-t1>1，y2-y1>0，slidenumber=1時(shí)，說明兩次操作不連貫，將slidenumber設(shè)置為1，并將t2值給到t1；
• 當(dāng)y2-y1<0時(shí)，向下滑動(dòng)，將slidenumber恢復(fù)到0。

Step6：最后添加監(jiān)聽，監(jiān)聽slidenumber參數(shù)，使用條件當(dāng)滿足speed=2且滾頁超過一屏（滾頁>603），則回到頂部圖標(biāo)出現(xiàn)。

判斷用戶滑動(dòng)次數(shù)的界面設(shè)置

本文由 @二樓自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議