編輯導語：在移動端的效果展示中，左右滑的手勢我們經常會體驗到。然而，如何以最快的速度設計出這個效果呢？本文作者就透過兩個步驟，簡潔的為我們做了介紹，快來學習吧。
昨天專案需要做一個手機版的活動頁面的原型，其中需要一個商品展示模組，移動版需要左右滑手勢的效果，結果想了小半天才想到怎麼非常快速的實現這個小功能。
先看效果，點選檢視：效果展示。
接下來說說我的方法，我覺得應該是最快速的辦法了。
一、第一步1. 建立元件
如上圖：放一個手機模型，中間看好哪裡需要做左右手勢效果。在這個模組位置，建立三個小模組，這三個小模組就是需要滑動的部分。
2. 轉換為動態面板這裡是一個小重點，大家注意了。
先將三個小模組轉換為動態面板（我們取名叫面板大A），將動態面板寬度縮小到手機內部，如圖：
點選進去，再將三個小模組轉換為動態面板（我們叫面板小a）：
要點說明：為何要兩次轉換動態面板呢？
因為面板大A需要配合最外部的手機模型，固定寬度，內容不能超出。而面板小a是為了後續方便加拖動事件。
二、第二步弄好元件以後，要開始加事件了，我們先想想最後需要什麼效果：
- 三個小模組可以左右滑動，滑動過程內容要跟著一起動；
- 左右滑需要邊界，最左側不能模組最左側的位置，最右側也不能低於模組最右側的位置。
一定是水平拖動，並未一定要新增邊界。建議從左側邊界計算比較方便，看左側最大能到哪裡，最小能到哪裡即可。
計算方法：三個小模組寬度-大A面板的寬度。
好了，預覽看效果吧。是不是很簡單呢？
本文由 @李太那個白 原創釋出於人人都是產品經理，未經許可，禁止轉載
題圖來自 Pexels，基於 CC0 協議