手機端交互中，頁面的上下左右滑動是常用的交互形態，今天給大家分享一下如何使用Axure來進行模擬，這里使用動態面板來實現，如果對動態面板不是很了解的同學，請查看專欄里的“動態面板入門教程”。

先看效果：

開工之前我們我們先分析一下，滑動效果的用處和實現方法：

1、上下滑動：一般用于瀏覽頁面，例如新聞客戶端的信息流。

實現方案：通過onDrag事件（鎖定y軸）控制頁面move動作，使頁面上下移動

2、左右滑動：一般用于tab切換，且一般都是頂部tab，例如新聞客戶端的分類

實現方案：通過onSwpieLeft和Right控制多個state頁面切換，達到tab切換

案例：模擬頭條的頁面切換（上下瀏覽頁面，左右切tab）

一、實現方案：

由于頂部tab和內容頁面的切換效果不一樣（一個為滑動，一個無動畫），我們這里將tab和頁面分隔為兩個動態面板來實現。

我們首先創建兩個動態面板，如下圖，我們分別命名為：Tab頁，內容頁。

二、動態面板的內容設置

1、為動態面板2（內容頁），增加三個state頁面，并將三個頁面內容填充進去

①為了體現上下滑動效果，頁面盡量長一些，至少2屏，這樣滑動效果較好。

②每個頁面中的元件制作完成后，建議都group起來，方便后續綁定action。

（內容我這里直接手機截圖，也可以自行設計。）

2、為動態面板1（Tab頁），增加三個state頁面，并將三個頁面內容填充進去

（如下圖，我這里直接截取的三張圖片）

三、事件設置（左右滑動，頁面切換）

1、內容頁向左切換：

選中動態面板2（內容頁），增加onSwipeLeft事件（左滑）

①Set Panel State為“內容頁”，設置頁面切換為Next，切換動畫為 slide left。

②Set Panel State為“Tab頁”，設置頁面切換為Next，切換動畫為 none。

2、內容頁向右切換：

選中動態面板2（內容頁），增加onSwipeRight事件（右滑），

①Set Panel State為“內容頁”，設置頁面切換為Previous，切換動畫為 slide right。

②Set Panel State為“Tab頁”，設置頁面切換為Previous，切換動畫為 none。

四、事件設置（上下滑動，頁面瀏覽）

上下滑動我們使用onDrag事件+move動作來實現，由于頁面的state會進行切換，我們需要三個onDrag+move的組合。

首先為動態面板2（內容頁）增加三個onDrag事件的case。

增加方法：

雙擊onDrag事件，彈出的事件對話框中，點擊頂部的Add Condition。

剩下的兩個case依次設定為state2，和state3，這里代表onDrag事件可根據state做不同的動作。

為每個剛才設置好的Case增加move動作，move的對象是group起來的一組圖片，Move的屬性設為with drag y。

也可以設定一個上邊界（Bounds），以防內容頂部滑動超出界面

參考設定值：top，is less than，0

其他兩個case操作一樣，下圖是事件配置完的狀態。

五、運行預覽效果

運行一下，我們上下滑動頁面，頁面展示不同內容。左右滑動頁面，頁面可以有滑動效果的切換，頂部tab無滑動效果切換，一切正常，大功告成。

總結

以上是生活随笔為你收集整理的axure动态面板滑动效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。