Axure最快實現移動端左右滑手勢滑動效果

昨天項目需要做一個手機版的活動頁面的原型，其中需要一個商品展示模塊，移動版需要左右滑手勢的效果，結果想了小半天才想到怎麼非常快速的實現這個小功能。

先看效果，點擊查看：效果展示。

接下來説説我的方法，我覺得應該是最快速的辦法了。

一、第一步1. 建立元件

如上圖：放一個手機模型，中間看好哪裏需要做左右手勢效果。在這個模塊位置，建立三個小模塊，這三個小模塊就是需要滑動的部分。

2. 轉換為動態面板

這裏是一個小重點，大家注意了。

先將三個小模塊轉換為動態面板（我們取名叫面板大A），將動態面板寬度縮小到手機內部，如圖：

3. 動態面板A自動會有一個state1

點擊進去，再將三個小模塊轉換為動態面板（我們叫面板小a）：

要點説明：為何要兩次轉換動態面板呢？

因為面板大A需要配合最外部的手機模型，固定寬度，內容不能超出。而面板小a是為了後續方便加拖動事件。

二、第二步

弄好元件以後，要開始加事件了，我們先想想最後需要什麼效果：

1. 三個小模塊可以左右滑動，滑動過程內容要跟着一起動；
2. 左右滑需要邊界，最左側不能模塊最左側的位置，最右側也不能低於模塊最右側的位置。

1. 選中小a動態面板，給整個面板添加一個拖動事件

一定是水平拖動，並未一定要添加邊界。建議從左側邊界計算比較方便，看左側最大能到哪裏，最小能到哪裏即可。

計算方法：三個小模塊寬度-大A面板的寬度。

好了，預覽看效果吧。是不是很簡單呢？

本文由 @李太那個白 原創發佈於人人都是產品經理，未經許可，禁止轉載

題圖來自 Pexels，基於 CC0 協議