現在，移動端已經逐漸超越了PC端成為了主流，各種手機APP稱出不窮，占據了我們的絕大多數生活，尤其是微信。無論吃飯、休息，還是工作，我們總不時地拿出手機，從消息的最頂端往下滑，直至看完所有的小紅點，然后從右往左滑過通訊錄，滑到發現，又是朋友圈的一輪瘋狂閱讀與點贊。喝點雞湯，尋點樂趣，我們的生活確實這么無趣。那么，在做原型的時候如何實現剛剛所說的橫縱向移動呢？下面我將向大家分享一下我的解決方法，希望能幫助到大家。

效果動態：

原材料：

步驟/方法

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

同時選中xiaoxi和tongxunlu—元件屬性與樣式“屬性”—在“輸入選項組名稱”中輸入“組”（輸入其他也可以）

同時選中xiaoxi和tongxunlu—元件屬性與樣式“屬性”—選中—勾選“字體顏色”選擇白色—在“填充顏色”選擇灰色—點擊確定

僅選中xiaoxi—元件屬性與樣式“屬性”-—勾選“選中”，使其在一開始頁面載入后默認狀態為選中。

第二步：設置兩層動態面板

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

在微#界面的展示區域內畫一個動態面板，使其大小與展示區域相同并重合，設置動態面板名稱為“d2”.

將動態面板d1復制到動態面板d2的一個子層級里面，并將d2的位置設置為“x:0；y:0”。

第三步：設置橫縱向滑動的交互動作

選中動態面板d2—元件交互與說明“交互”—點擊“拖動時”—移動—勾選“d1（動態面板）”—移動“垂直拖動”；動畫“無”。完成后結果如下圖

選中動態面板d2—元件交互與說明“交互”—點擊“向左拖動結束時”—編輯條件—選擇“選中狀態”“xiaoxi”“=”“值”“true”。（如下圖）

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

繼續，在添加動作中選擇“設置選中”—選中—勾選“tongxunlu”—設置選中狀態為“值”“true”。

同理，按照移動相反方向設置“向右拖動結束時”的交互動作，完成后如下圖。

第四步：設置上下移動限制條件

通過上面的三步已經可以實現頁面橫縱向同時滑動，但是會發現一個問題，就是上下滑動的時候可以將消息頁面或通訊錄頁面滑出展示區域外。為了，更好的體驗，下面我們來對上下滑動范圍加一個限制條件。

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

繼續，添加動作選擇“移動”—勾選“d1（動態面板）”—移動“到絕對位置”“y:0”—點擊x后面的“fx”—添加局部變量“d1”=“元件”“d1”—插入變量或函數輸入“d1.x”—點擊“確定”完成設置

同理，設置下方的移動限制。

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

462的由來：462為動態面板d1的高度，需根據你的實際需求來定。

繼續，添加動作選擇“移動”—勾選“d1（動態面板）”—移動“到絕對位置”“y:-199”—點擊x后面的“fx”—添加局部變量“d1”=“元件”“d1”—插入變量或函數輸入“d1.x”—點擊“確定”完成設置.

-199的由來：動態面板d1與動態面板d2的高度差為-199.

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

本文旨在向大家分享一下我個人對這個問題的解決方案，有什么不對或不好的地方請大家多多諒解。

原型下載地址：

鏈接：http://pan.baidu.com/s/1hsCuA0k ? 密碼：0oha

本文由 @簡揚 原創發布于人人都是產品經理。未經許可，禁止轉載。