在我們打開任何手機(jī)app滑動(dòng)的手勢(shì)最多的永遠(yuǎn)是兩種，上下滑動(dòng)與左右滑動(dòng)，這個(gè)原型是如何在Axure里面怎么體現(xiàn)出來的呢？接下來我就來告訴大家。

要完成這看似簡單的操作，其實(shí)還是要有一些技巧的。Axure軟件動(dòng)態(tài)面板屬性可以滑動(dòng)，但是滑動(dòng)的結(jié)果只能是水平和垂直兩種分開的情況。

但是也不是沒有辦法實(shí)現(xiàn)同頁面上下、左右滑動(dòng)這個(gè)效果。

主要突破點(diǎn)在對(duì)條件的判斷。

我們回想一下使用手機(jī)App軟件的情形，按住屏幕不松手指向下滑動(dòng)屏幕，手機(jī)里面頁面只能向下（上）滑動(dòng)，無論你手再怎么左右滑動(dòng)，其結(jié)果還是向下（上）滑動(dòng)；向左右滑動(dòng)屏幕也是一樣的道理。

所以，手給屏幕一個(gè)動(dòng)作，頁面判斷手滑動(dòng)屏幕的方向，執(zhí)行手最初始手滑動(dòng)屏幕方向移動(dòng)，而且不松手，屏幕移動(dòng)只能維持豎直或者水平兩種效果，并不能從豎直移動(dòng)轉(zhuǎn)換到水平移動(dòng)，除非松手后頁面再次執(zhí)行判斷。即手最開始的動(dòng)作決定了頁面滑動(dòng)的方向。

抓住這一點(diǎn)，通過已學(xué)Axure軟件知識(shí)點(diǎn)，我想出如下實(shí)現(xiàn)該功能方案。

一、重要定義

1. 三個(gè)動(dòng)態(tài)面板

• 動(dòng)態(tài)面板A、B ——A和B為嵌套關(guān)系，A在外層，B在內(nèi)層
• 動(dòng)態(tài)面板C——兩個(gè)狀態(tài)循環(huán)記錄全局變量x、y

2. 兩個(gè)全局變量

• x=沿x軸拖動(dòng)總距離的絕對(duì)值向上取整（[[math.abs(math.ceil(TotalDragX))]])
• y=沿y軸拖動(dòng)總距離的絕對(duì)值向上取整（[[math.abs(math.ceil(TotalDragY))]])

二、核心問題——如合精確且迅捷的知道手移動(dòng)屏幕的方向？

我通過多次嘗試終于測(cè)試出一種結(jié)果較為理想的方法：

拖動(dòng)動(dòng)態(tài)面板A開始，通過動(dòng)態(tài)面板C兩個(gè)狀態(tài)快速循環(huán)，在其狀態(tài)改變時(shí)記錄全局變量x、y，進(jìn)而判斷拖動(dòng)動(dòng)態(tài)面板A時(shí)x、y大小從而知道其頁面（動(dòng)態(tài)面板B）滑動(dòng)方向。

流程圖如下：

三、具體原型設(shè)計(jì)

做一個(gè)手機(jī)外殼，內(nèi)嵌寬高325X575的內(nèi)聯(lián)框架，連接框架到內(nèi)容頁面：

設(shè)置全局變量x、y；

點(diǎn)擊菜單欄中-項(xiàng)目-全局變量，新增兩個(gè)全局變量x和y，設(shè)值為空或0；

向新的頁面添加一個(gè)帶頁碼的矩形標(biāo)識(shí)框，復(fù)制成三份，分別代表第一頁、第二頁、第三頁，名稱分別為1、2、3。

將這三個(gè)頁面圈起來—右鍵—轉(zhuǎn)換為動(dòng)態(tài)面板，設(shè)置該動(dòng)態(tài)面板名稱為B，再點(diǎn)擊動(dòng)態(tài)面板B—右鍵—轉(zhuǎn)換為動(dòng)態(tài)面板，設(shè)置最外層動(dòng)態(tài)面板名稱為A。

再往動(dòng)態(tài)面板A外面拖入一個(gè)新的動(dòng)態(tài)面板C,把動(dòng)態(tài)面板狀態(tài)添加到兩個(gè)。

在動(dòng)態(tài)面板A上設(shè)置如下用例：

拖動(dòng)開始時(shí)：設(shè)置動(dòng)態(tài)面板C狀態(tài)為Next，向后循環(huán)，間隔2ms（時(shí)間要短）；

拖動(dòng)時(shí)：判斷全局變量x，y大??；

x>y時(shí)水平移動(dòng)動(dòng)態(tài)面板B，x<y時(shí)垂直移動(dòng)動(dòng)態(tài)面板B；

拖動(dòng)結(jié)束時(shí)：設(shè)置動(dòng)態(tài)面板C停止循環(huán)。

在動(dòng)態(tài)面板C上設(shè)置用例

狀態(tài)改變時(shí)：設(shè)置全局變量值。

x=[[math.abs(math.ceil(TotalDragX))]]，y=[[math.abs(math.ceil(TotalDragY))]]

點(diǎn)擊菜單欄發(fā)布-預(yù)覽即可看到同頁面實(shí)現(xiàn)了左右、上下兩種拖動(dòng)效果。

emmmmmmm覺得看著很不舒服我們可以進(jìn)一步完善原型：

增加：

1. 頁面拖動(dòng)范圍和水平拖動(dòng)的兩種效果
2. 緩慢拖動(dòng)
3. 快速拖動(dòng)

在原來的原型基礎(chǔ)上：

1. 頁面范圍的限制條件可以添加在動(dòng)態(tài)面板A拖動(dòng)時(shí)-界限-添加邊界

水平拖動(dòng)而言，知道動(dòng)態(tài)面板B元件的寬高為975X1000，單個(gè)矩形頁面寬高為325X1000。所以水平拖動(dòng)限制邊界范圍為[-650，0]即可滿足水平拖動(dòng)時(shí)不會(huì)把頁面拖瀏覽邊框。

同樣的垂直拖動(dòng)，限制邊界范圍為[-500，0]即可。

2. 緩慢拖動(dòng)

試想一下手指緩慢滑動(dòng)屏幕（拖動(dòng)時(shí)間長），頁面也跟隨滑動(dòng)，當(dāng)滑動(dòng)距離超過半個(gè)頁面寬度時(shí)，會(huì)跳轉(zhuǎn)到下一頁面，沒有超過時(shí)會(huì)回到當(dāng)前頁面。要實(shí)現(xiàn)這個(gè)功能，只需要在動(dòng)態(tài)面板A上添加以下用例：

動(dòng)態(tài)面板A 拖動(dòng)結(jié)束時(shí)：

如果拖動(dòng)時(shí)間（dragtime）大于300ms，移動(dòng)動(dòng)態(tài)面板B以線性300ms的方式到達(dá)位置x=[[math.min(B.x/325).tofixed(0)*325]]，y=[[target.y]]

解釋：math.min(x),取最小值，在此僅用于把(B.x/325)由數(shù)值變?yōu)閷?duì)象；B.x,動(dòng)態(tài)面板B的左邊界；

LVAR.toFixed(decimalPoints)表示對(duì)對(duì)象四舍五入，decimalPoints為小數(shù)點(diǎn)后幾位，注意，該函數(shù)只能針對(duì)對(duì)象使用，不能針對(duì)值使用，故把(B.x/325)轉(zhuǎn)變?yōu)閷?duì)象才能使用該函數(shù)；target.y目標(biāo)元件（動(dòng)態(tài)面板B）的上邊界。

math.min(B.x/325).tofixed(0)*325，這個(gè)意思就是動(dòng)態(tài)面板B左邊界與頁面寬度的比值四舍五入后再乘以頁面寬度的值，這個(gè)值（0，-325，-650）即動(dòng)態(tài)面板移動(dòng)到相應(yīng)的頁面的x軸坐標(biāo)。

3. 快速拖動(dòng)

快速拖動(dòng)頁面，對(duì)應(yīng)手指左右快速滑動(dòng)屏幕，屏幕會(huì)直接跳轉(zhuǎn)到下一頁面。

這種情況下拖動(dòng)時(shí)間短，需要考慮的是拖動(dòng)方向與當(dāng)前頁面位置。

拖動(dòng)方向利用TotalDragX來決定，其值大于0則是向右拖動(dòng)，小于0向左拖動(dòng)。

當(dāng)前頁面位置，通過判斷動(dòng)態(tài)面板B的左邊界位置即可。

在動(dòng)態(tài)面板A上添加用例：

動(dòng)態(tài)面板A 拖動(dòng)結(jié)束時(shí)：

• case2.1（第一頁左滑到第二頁）拖動(dòng)時(shí)間（dragtime）小于300ms，沿x軸拖動(dòng)總距離（TotalDragX）小于0且動(dòng)態(tài)面板B左邊界大于-325時(shí)，線性300ms移動(dòng)動(dòng)態(tài)面板B到達(dá)（-325，target.y）
• case2.2（第二頁左滑到第三頁） 拖動(dòng)時(shí)間（dragtime）小于300ms，沿x軸拖動(dòng)總距離（TotalDragX）小于0且動(dòng)態(tài)面板B左邊界為（-650，-325）時(shí)，線性300ms移動(dòng)動(dòng)態(tài)面板B到達(dá)（-650，target.y）
• case2.3 （第三頁右滑到第二頁）拖動(dòng)時(shí)間（dragtime）小于300ms，沿x軸拖動(dòng)總距離（TotalDragX）大于0且動(dòng)態(tài)面板B左邊界為（-650，-325）時(shí)，線性300ms移動(dòng)動(dòng)態(tài)面板B到達(dá)（-325，target.y）
• case2.4 （第二頁右滑到第一頁）拖動(dòng)時(shí)間（dragtime）小于300ms，沿x軸拖動(dòng)總距離（TotalDragX）大于0且動(dòng)態(tài)面板B左邊界大于-325時(shí)，線性300ms移動(dòng)動(dòng)態(tài)面板B到達(dá)（0，target.y）

在此，該原型得以完善。

此原型可以在同一頁面實(shí)現(xiàn)上下、左右滑動(dòng)，且滑動(dòng)頁面不會(huì)超出頁面，左右滑動(dòng)時(shí)，有慢速和快速滑動(dòng)兩種方式皆可實(shí)現(xiàn)頁面跳轉(zhuǎn)。

好了，就這么多了。第一次寫這個(gè)累死了，emmm下次會(huì)好好排版的，謝謝觀看。

emmmmmmm

差點(diǎn)忘記貼連接了：

https://d3gt76.axshare.com

本文由 @嘟嘟噠嘟噠 原創(chuàng)發(fā)布。未經(jīng)許可，禁止轉(zhuǎn)載。

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