本文主要講的是關(guān)于手機(jī)屏幕上的滑動(dòng)在原型設(shè)計(jì)中是如何實(shí)現(xiàn)的，一起來(lái)文中看看~

我們使用手機(jī)時(shí)經(jīng)常看小說(shuō)，逛商城需要大量的滑屏。左右（滑過(guò)來(lái)，滑過(guò)去），上下（滑上去，滑下來(lái)），滑的不行不行的，有木有？但是在原型設(shè)計(jì)中是如何實(shí)現(xiàn)呢？

反正這個(gè)問(wèn)題也困擾我一段時(shí)間了，就是不好實(shí)現(xiàn)，也得虧我沒有放棄，查看了很多資料，慢慢琢磨出了一點(diǎn)門道，分享給大家，先預(yù)覽一下再看下面的詳細(xì)過(guò)程。

預(yù)覽地址：https://dft9cl.axshare.com

一、分析

主要實(shí)現(xiàn)以下功能：

1. 上下拖動(dòng)回彈效果；
2. 上下拖動(dòng)沒有回彈效果；
3. 左右拖動(dòng)。

我們先來(lái)看看1、2如何實(shí)現(xiàn)，后面再看3。

二、元件準(zhǔn)備（1、2需要的元件一樣）

從元件庫(kù)中拖一個(gè)動(dòng)態(tài)面板命名為“fisrst”高“400”雙擊“state1”再拖一個(gè)動(dòng)態(tài)面板命名為“second”，高“550”（second要高于first，要不然無(wú)法拖動(dòng)）。

三、交互

（1）上下拖動(dòng)有回彈

給“second”添加“拖動(dòng)時(shí)”用例，垂直拖動(dòng)“second”等待200毫秒顯示刷新。

這時(shí)按F5預(yù)覽，我們上下拖動(dòng)圖片發(fā)現(xiàn)會(huì)一直拖出屏幕，沒有出現(xiàn)我們需要的彈彈彈~

我們返回“second”添加“拖動(dòng)結(jié)束時(shí)”用例1，我們先添加條件，我們需要判斷“second”有沒有發(fā)生拖動(dòng)，如果“second”y軸坐標(biāo)>0（y軸相對(duì)移動(dòng)）說(shuō)明發(fā)生拖動(dòng)，并且是向下拖動(dòng)。

如果“second”向下拖動(dòng)，我們需要讓“second”回到原來(lái)的位置。這里我們添加了有個(gè)刷新的動(dòng)態(tài)效果，所以先讓“second”移動(dòng)到（0，40）的位置，讓動(dòng)態(tài)效果出現(xiàn)，等待1000毫秒，移動(dòng)“second”到（0,0），讓“second”回到原來(lái)的位置。

為“second”添加“拖動(dòng)結(jié)束時(shí)”用例2，我們添加條件，我們需要判斷“second”有沒有發(fā)生拖動(dòng)，如果“second”y軸坐標(biāo)<-150（y軸相對(duì)移動(dòng)“150”為“fisrst”和“second”高度差）說(shuō)明發(fā)生拖動(dòng)，并且是向上拖動(dòng)。

如果“second”向上拖動(dòng)，我們需要讓“second”回到（0，-150）的位置，正好是“second”最底下。

（2）上下拖動(dòng)沒有回彈效果

為“second”添加“拖動(dòng)時(shí)”用例，垂直拖動(dòng)。添加邊界，頂部《=0（不讓“second”向下拖動(dòng)），頂部》=（“first”的高減去“second”的高），也就是，頂部向上移動(dòng)不超過(guò)“-150”。

按F5預(yù)覽，功能都實(shí)現(xiàn)了，接下來(lái)我們完成，（3）左右拖動(dòng)。

四、元件準(zhǔn)備

只需要從元件庫(kù)中拖一個(gè)動(dòng)態(tài)面板命名“move”，雙擊“state1”添加一張圖片，再?gòu)?fù)制“state1”，添加4狀態(tài)，換4張不同的圖片。

五、添加交互

給動(dòng)態(tài)面板添加“向左拖動(dòng)結(jié)束時(shí)”用例1，添加條件，判斷“move”面板狀態(tài)，如果面板狀態(tài)為“state1”，設(shè)置面板“move”為“state2”向左滑動(dòng)。依次循環(huán)，就能實(shí)現(xiàn)向左滑動(dòng)，向右滑動(dòng)只要添加“向右拖動(dòng)結(jié)束時(shí)”用例。

源文件下載：鏈接：https://pan.baidu.com/s/1E5ai-YTECuPRaHU_FZ7gBg 密碼：8tci

本文由 @就這樣吧！ 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自 Pexels，基于 CC0 協(xié)議