中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

具體運用場景

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

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

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

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

案例源文件下載&預覽：

https://cloud.protopie.io/p/14e927bfe8（需要下載源文件，源文件中有四個不同場景，對應“快擲”、“速度判斷”*2、“次數判斷”）

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

此方案需要滿足的兩個判定條件：

• 滑動距離超過一屏；
• 滑動速度超過X。

使用Protopie的觸發(fā)

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

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

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

利用Protopie預定義變量

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

Protopie中有預定義獲取點擊后手指在屏幕上滑動的速度：

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

使用預定義變量實現(xiàn)的界面設置

自定義參數計算

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

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

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

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

Step3：t1和t2，分別添加在下?lián)艉吞鸩僮飨?，使其等?strong>time。Step4：y1和y2，分別添加在下?lián)艉吞鸩僮飨拢脩舨僮魑恢玫膟，使用表達式$mouseY

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

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

PS. 若方向不做考慮可以使用abs函數，abs是取絕對值的函數去除移動方向的限制。

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

使用自定義變量計算速度的界面設置

案例拓展

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

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

需要滿足的判定條件：

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

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

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

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

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

Step4：當用戶抬起操作時，若操作計數slidenumber為0則將當前的time賦值給t1；若操作計數slidenumber為1，則將當前的time賦值給t2。

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

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

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

判斷用戶滑動次數的界面設置

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

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