Axure教程：移動端原型頁面橫縱向滑動同時實現

現在，移動端已經逐漸超越了PC端成爲了主流，各種手機(jī)APP稱出不窮，占據了我們的絕大(dà)多數生(shēng)活，尤其是微信。無論吃(chī)飯、休息，還(hái)是工(gōng)作(zuò)，我們總
不時地拿出手機(jī)，從(cóng)消息的最頂端往下滑，直至看(kàn)完所有的小紅(hóng)點，然後從(cóng)右往左滑過通訊錄，滑到發現，又是朋友圈的一輪瘋狂閱讀(dú)與點贊。喝(hē)點雞湯，尋點樂
趣，我們的生(shēng)活确實這麽無趣。那麽，在做原型的時候如(rú)何實現剛剛所說(shuō)的橫縱向移動呢(ne)？下面我将向大(dà)家分(fēn)享一下我的解決方法，希望能幫助到大(dà)家。

效果動态：

原材料：

步驟/方法

第一步：設置按鈕的選中效果和組

同時選中xiaoxi和tongxunlu—元件(jiàn)屬性與樣式“屬性”—在“輸入選項組名稱”中輸入“組”（輸入其他(tā)也可(kě)以）

同時選中xiaoxi和tongxunlu—元件(jiàn)屬性與樣式“屬性”—選中—勾選“字體(tǐ)顔色”選擇白(bái)色—在“填充顔色”選擇灰色—點擊确定

僅選中xiaoxi—元件(jiàn)屬性與樣式“屬性”­—勾選“選中”，使其在一開始頁面載入後默認狀态爲選中。

第二步：設置兩層動态面闆

通過移動将消息頁面和通訊錄頁面合并在一起，同時選中消息頁面和通訊錄頁面—右鍵單擊—轉換爲動态面闆—設置動态面闆名稱爲“d1”。

在微#界面的展示區域内畫(huà)一個動态面闆，使其大(dà)小與展示區域相(xiàng)同并重合，設置動态面闆名稱爲“d2”.

将動态面闆d1複制到動态面闆d2的一個子層級裡(lǐ)面，并将d2的位置設置爲“x:0；y:0”。

第三步：設置橫縱向滑動的交互動作(zuò)

選中動态面闆d2—元件(jiàn)交互與說(shuō)明“交互”—點擊“拖動時”—移動—勾選“d1（動态面闆）”—移動“垂直拖動”；動畫(huà)“無”。完成後結果如(rú)下圖

選中動态面闆d2—元件(jiàn)交互與說(shuō)明“交互”—點擊“向左拖動結束時”—編輯條件(jiàn)—選擇“選中狀态”“xiaoxi”“=”“值”“true”。（如(rú)下圖）

繼續，選擇“移動”—勾選“d1（動态面闆）”—移動“絕對位置”“x:-320”—點擊fx—在“添加局部變量中”設置“d1”=“元
件(jiàn)”“d1”—插入變量或函數—在元件(jiàn)中選擇“y”—将[[this.y]]改成[[d1.y]]—點擊“确定”返回上級頁面—動畫(huà)“線性”，時間
“300”毫秒—點擊确定。

繼續，在添加動作(zuò)中選擇“設置選中”—選中—勾選“tongxunlu”—設置選中狀态爲“值”“true”。

同理(lǐ)，按照(zhào)移動相(xiàng)反方向設置“向右拖動結束時”的交互動作(zuò)，完成後如(rú)下圖。

第四步：設置上下移動限制條件(jiàn)

通過上面的三步已經可(kě)以實現頁面橫縱向同時滑動，但(dàn)是會發現一個問(wèn)題，就(jiù)是上下滑動的時候可(kě)以将消息頁面或通訊錄頁面滑出展示區域外。爲了，更好的體(tǐ)驗，下面我們來(lái)對上下滑動範圍加一個限制條件(jiàn)。

選中動态面闆d2—元件(jiàn)交互與說(shuō)明“交互”—點擊“拖動時”—添加條件(jiàn)—選擇“值”—點擊fx—添加局部變量“d1”=“元件(jiàn)”“d1”—插入變量或函數輸入“[[d1.top]]”—點擊“确定”返回上級頁面—選擇“>=”“值”“0”—點擊“确定”完成條件(jiàn)編輯

繼續，添加動作(zuò)選擇“移動”—勾選“d1（動态面闆）”—移動“到絕對位置”“y:0”—點擊x後面的“fx”—添加局部變量“d1”=“元件(jiàn)”“d1”—插入變量或函數輸入“d1.x”—點擊“确定”完成設置

同理(lǐ)，設置下方的移動限制。

選中動态面闆d2—元件(jiàn)交互與說(shuō)明“交互”—點擊“拖動時”—添加條件(jiàn)—選擇“值”—點擊fx—添加局部變量“d1”=“元件(jiàn)”“d1”—插入變量
或函數輸入“[[d1.bottom]]”—點擊“确定”返回上級頁面—選擇“<=”“值”“462”—點擊“确定”完成條件(jiàn)編輯

462的由來(lái)：462爲動态面闆d1的高度，需根據你(nǐ)的實際需求來(lái)定。

繼續，添加動作(zuò)選擇“移動”—勾選“d1（動态面闆）”—移動“到絕對位置”“y:-199”—點擊x後面的“fx”—添加局部變量“d1”=“元件(jiàn)”“d1”—插入變量或函數輸入“d1.x”—點擊“确定”完成設置.

-199的由來(lái)：動态面闆d1與動态面闆d2的高度差爲-199.

至此，已經完成了移動端原型頁面橫縱向滑動同時實現的設置了。

本文旨在向大(dà)家分(fēn)享一下我個人(rén)對這個問(wèn)題的解決方案，有什麽不對或不好的地方請(qǐng)大(dà)家多多諒解。