中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

昨天項目需要做一個手機版的活動頁面的原型，其中需要一個商品展示模塊，移動版需要左右滑手勢的效果，結果想了小半天才想到怎么非?？焖俚膶崿F這個小功能。

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

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

一、第一步

1. 建立元件

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

2. 轉換為動態面板

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

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

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

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

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

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

二、第二步

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

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

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

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

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

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

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

題圖來自 Pexels，基于 CC0 協議