編輯導(dǎo)語：在移動端的效果展示中，左右滑的手勢我們經(jīng)常會體驗到。然而，如何以最快的速度設(shè)計出這個效果呢？本文作者就通過兩個步驟，簡潔的為我們做了介紹，快來學(xué)習(xí)吧。

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

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

接下來說說我的方法，我覺得應(yīng)該是最快速的辦法了。

一、第一步

1. 建立元件

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

2. 轉(zhuǎn)換為動態(tài)面板

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

先將三個小模塊轉(zhuǎn)換為動態(tài)面板（我們?nèi)∶忻姘宕驛），將動態(tài)面板寬度縮小到手機內(nèi)部，如圖：

3. 動態(tài)面板A自動會有一個state1

點擊進(jìn)去，再將三個小模塊轉(zhuǎn)換為動態(tài)面板（我們叫面板小a）：

要點說明：為何要兩次轉(zhuǎn)換動態(tài)面板呢？

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

二、第二步

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

1. 三個小模塊可以左右滑動，滑動過程內(nèi)容要跟著一起動；
2. 左右滑需要邊界，最左側(cè)不能模塊最左側(cè)的位置，最右側(cè)也不能低于模塊最右側(cè)的位置。

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

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

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

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

本文由 @李太那個白 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自 Pexels，基于 CC0 協(xié)議