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

本文主要講的是關于手機屏幕上的滑動在原型設計中是如何實現的，一起來文中看看~

我們使用手機時經常看小說，逛商城需要大量的滑屏。左右（滑過來，滑過去），上下（滑上去，滑下來），滑的不行不行的，有木有？但是在原型設計中是如何實現呢？

反正這個問題也困擾我一段時間了，就是不好實現，也得虧我沒有放棄，查看了很多資料，慢慢琢磨出了一點門道，分享給大家，先預覽一下再看下面的詳細過程。

預覽地址：https://dft9cl.axshare.com

一、分析

主要實現以下功能：

1. 上下拖動回彈效果；
2. 上下拖動沒有回彈效果；
3. 左右拖動。

我們先來看看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://pan.baidu.com/s/1E5ai-YTECuPRaHU_FZ7gBg 密碼：8tci

本文由 @就這樣吧！ 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自 Pexels，基于 CC0 協議