起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure教程：移動端原型頁面橫縱向滑動同時實現
現在，移動端已經逐漸超越了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
本文由 @簡揚 原創發布于人人都是產品經理。未經許可，禁止轉載。
還有個bug 如果倆頁面不是一樣的那么你的D2不會隱藏
那個拖動應該是相對位置吧，絕對位置你向左滑動結束后他就又一次的回到了你所謂的D1了
樓主，能不能發個鏈接
首先感謝樓主的分享,雖然跟著做出來了但是還是有點不懂.這種不能實現微信的功能啊,無論聊天窗口向下滑動多少,向右滑動之后會切換到聯系人的最頂端,這種方法很難實現嗎?
為什么不能下載
太古老， 網盤整理了，分享鏈接可能就壞了
http://vvqofr.axshare.com
lz能幫忙看下嗎？為什么我做出來以后滑到右邊再下滑會自動跳轉到左邊
為什么[[d1.top]]>=0而不是大于等于導航欄的坐標呢？ ?? 求解
為什么d2的位置設置為“x:0；y:0呢？
我實驗了一下，如果d2是x：0 ；y：50 向下移動的時候會多出50的寬度，這是什么問題
為什么我設置上下滑動限制的時候默認的是else if 不是if，因為前面case1已經有if true了
這個我知道了
很實用，讓自己長進不少，還揣摩出了移動的x軸折現圖畫法，原型的交互做到位了 就可以少些說明 非常方便，現在習慣做交互了 給你點個贊
不錯，好好加油
哈哈
?? 還是不太明白，為何一定要花這么多時間和精力去設置各種函數，去做各種逼格的交互。從業至今，一直喜歡低保真，復雜界面，就進行界面拆分，并附上交互說明。
還是那么一句話：
做出來原型又不是給最終用戶用的，畫原型，主要目的是為了讓開發更好的理解，工具只是工具而已！
這個我也知道，平時也都是用AXURE一個個頁面畫，然后在旁邊寫交互說明。寫這些只是出于一種工具癖好，對于Axure這個軟件的應用而已。
其實也不需要這么多變量吧？“面板1”里放三個層，每個層放一個面板，每一層的面板的swipeleft和swiperight添加case切換“面板1”的層就好了。
第四步的點擊拖動時有錯誤，應該是拖動結束時，這樣才能實現一個回彈效果。其他的話頁面往上滑底部應該有加載提示，與頁面往下滑不同~
沒有錯誤，是拖動時，如果是拖動結束時就太慢了，會出現在拖動的過程中超出屏幕顯示。
老夫用代碼實現給你看
? 學做產品的，不太懂代碼。這個用代碼實現起來應該很簡單吧？
寫的不錯
謝謝 ??
涉及到變量就懵逼了…
還好??！慢慢學，其實不難的。
不太明白設置移動絕對位置和局部變量是為了實現什么功能，求解答。因為，貌似不用函數也可以做到這種拖動效果吧。
不用函數也可以 ，用函數只是為了方便快捷。另外移動絕對位置和局部變量，只是為了不出現在移動的過程中出現通訊錄移出屏幕的問題。
學習了，66666
左右拖動不能單純設置拖動結束，應當考慮其左右拖動的距離，當拖動距離不足半屏應該不會切換，上下拖動應得加入回彈效果，向下拖動應該加入loading信息吧
謝謝提醒！不完善的地方以后會慢慢改善的。其實還應該考慮，單手操作手機，快速滑動小段距離切換屏幕的效果。
動態面板d1與動態面板d2的高度差不是應該為0么，沒懂這里的意思額
不可能是零的，就像你的微信在屏幕上不可能吧你的通訊錄全部顯示完是一樣的，d1就相當于通訊錄，d2就相當于屏幕，所以d1要比d2高得多。