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

昨天項(xiàng)目需要做一個(gè)手機(jī)版的活動(dòng)頁(yè)面的原型，其中需要一個(gè)商品展示模塊，移動(dòng)版需要左右滑手勢(shì)的效果，結(jié)果想了小半天才想到怎么非?？焖俚膶?shí)現(xiàn)這個(gè)小功能。

先看效果，點(diǎn)擊查看：效果展示。

接下來(lái)說(shuō)說(shuō)我的方法，我覺(jué)得應(yīng)該是最快速的辦法了。

一、第一步

1. 建立元件

如上圖：放一個(gè)手機(jī)模型，中間看好哪里需要做左右手勢(shì)效果。在這個(gè)模塊位置，建立三個(gè)小模塊，這三個(gè)小模塊就是需要滑動(dòng)的部分。

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

這里是一個(gè)小重點(diǎn)，大家注意了。

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

3. 動(dòng)態(tài)面板A自動(dòng)會(huì)有一個(gè)state1

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

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

因?yàn)槊姘宕驛需要配合最外部的手機(jī)模型，固定寬度，內(nèi)容不能超出。而面板小a是為了后續(xù)方便加拖動(dòng)事件。

二、第二步

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

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

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

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

計(jì)算方法：三個(gè)小模塊寬度-大A面板的寬度。

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

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

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