本文主要講的是關於手機屏幕上的滑動在原型設計中是如何實現的，一起來文中看看~
我們使用手機時經常看小說，逛商城需要大量的滑屏。左右（滑過來，滑過去），上下（滑上去，滑下來），滑的不行不行的，有木有？但是在原型設計中是如何實現呢？
反正這個問題也困擾我一段時間了，就是不好實現，也得虧我沒有放棄，查看了很多資料，慢慢琢磨出了一點門道，分享給大家，先預覽一下再看下面的詳細過程。
一、分析
主要實現以下功能：
上下拖動回彈效果；上下拖動沒有回彈效果；左右拖動。
我們先來看看1、2如何實現，後面再看3。
二、元件準備（1、2需要的元件一樣）
從元件庫中拖一個動態面板命名為「fisrst」高「400」雙擊「state1」再拖一個動態面板命名為「second」，高「550」（second要高於first，要不然無法拖動）。
三、交互
（1）上下拖動有回彈
給「second」添加「拖動時」用例，垂直拖動「second」等待200毫秒顯示刷新。
這時按F5預覽，我們上下拖動圖片發現會一直拖出屏幕，沒有出現我們需要的彈彈彈~
我們返回「second」添加「拖動結束時」用例1，我們先添加條件，我們需要判斷「second」有沒有發生拖動，如果「second」y軸坐標>0（y軸相對移動）說明發生拖動，並且是向下拖動。
如果「second」向下拖動，我們需要讓「second」回到原來的位置。這裡我們添加了有個刷新的動態效果，所以先讓「second」移動到（0，40）的位置，讓動態效果出現，等待1000毫秒，移動「second」到（0,0），讓「second」回到原來的位置。
為「second」添加「拖動結束時」用例2，我們添加條件，我們需要判斷「second」有沒有發生拖動，如果「second」y軸坐標<-150（y軸相對移動「150」為「fisrst」和「second」高度差）說明發生拖動，並且是向上拖動。
如果「second」向上拖動，我們需要讓「second」回到（0，-150）的位置，正好是「second」最底下。
（2）上下拖動沒有回彈效果
為「second」添加「拖動時」用例，垂直拖動。添加邊界，頂部《=0（不讓「second」向下拖動），頂部》=（「first」的高減去「second」的高），也就是，頂部向上移動不超過「-150」。
按F5預覽，功能都實現了，接下來我們完成，（3）左右拖動。
四、元件準備
只需要從元件庫中拖一個動態面板命名「move」，雙擊「state1」添加一張圖片，再複製「state1」，添加4狀態，換4張不同的圖片。
五、添加交互
給動態面板添加「向左拖動結束時」用例1，添加條件，判斷「move」面板狀態，如果面板狀態為「state1」，設置面板「move」為「state2」向左滑動。依次循環，就能實現向左滑動，向右滑動只要添加「向右拖動結束時」用例。
源文件下載：連結：https:///s/1E5ai-YTECuPRaHU_FZ7gBg 密碼：8tci
本文由 @就這樣吧！ 原創發布於人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議