對單條列表進行橫向滑動顯示其支持的操作項，是一種比較常見的移動端交互方式。本案例將以任務列表頁面爲例，使用Protopie軟件來實現單條任務列表左滑刪除、右滑設爲完成的效果。

涉及到的基本Protopie功能

• Protopie組件的使用
• 觸發：拖拽、監聽、抬起、長按
• 反應：移動、透明度、大小

實現效果

案例具體實現效果

本案例在任務列表頁面中對於單條列表均支持左右滑動。向左滑動顯示刪除操作，當滑動超過設定距離或點擊刪除按鈕時，刪除該條任務並將之後當任務進行上移。向右滑動顯示設爲已完成操作，同樣的當滑動距離超過設定距離或點擊設爲完成按鈕時，對任務文本添加刪除線表示其已完成。

實現思路

3.1 左後橫滑的操作及範圍分析

由於單條列表是支持左右滑動，並基於用戶的滑動距離實現不同的反饋，這在Protopie中主要通過用戶滑動操作抬起後列表本身的位置X來進行判斷的。

如圖所示，將界面的橫軸分爲5個不同區段，分別爲直接刪除區域、顯示刪除按鈕區域、不顯示操作項區域、顯示設爲完成按鈕區域、直接設爲完成區域，當用戶抬起操作執行時，列表錨點X落入不同範圍執行對應操作。

操作範圍圖示

3.2 利用組件提升效率

Protopie在4.0版本上新增了組件功能，通過建立組件，可以將同類的動效組件快速應用到不同場景，避免不必要的重複性工作，提高原型製作效率。本案例中的任務列表頁面中每個單條的列表支持的觸發及反應一致，可以通過建立單條列表的組件並在具體場景中複用，來減少重複設置提升效率。

新建組件：一種是在具體場景頁面中選取要建立的組件所涉及的所有圖層，點擊上端的“組件”或者右鍵選擇“創建組件”實現組件的建立。另一種可以直接在組件管理面板中點擊加號新建一個空的組件對象。

添加組件的兩種方式入口

使用及編輯組件：組件編輯完成後，回到場景，可以直接將編輯好的組件從左側拖入到畫板，實現組件的調用。根據使用場景的不同，可以對組件做單獨調整，像本案例中可以編輯列表中的文本內容。

如果需要調整組件母版，點擊左側的組件圖標，雙擊要修改的組件即可編輯。還可以在場景中選中一個調整後的組件，勾選“設置爲母版組件”，完成後組件組件在圖層列表中的顏色變化，這樣對其的調整會同步到其他組件上。

設置爲母版組件方式及設置成功後視效差異

3.3 不同長度文本的刪除線添加

案例中當任務列表設爲完成後對具體的文本會添加刪除線，並且刪除線有從左向右展開的動效。Protopie中文本的樣式中沒有刪除線的設置，所以實現是我們需要使用矩形來實現。同時由於對於列表我們使用了組件，所以具體效果需要根據文本的長度實現調整。

這裏涉及Protopie中的文本處理表達式 length(source:TEXT)，支持計算文本的長度（字符數+空格數），乘上單個文字的長度就可以獲得文本刪除線的寬度。

文本長度函數說明

具體實現步驟

Step 1

新建Protopie文件，將Figma的頁面設計文檔導入到Protopie中。選擇單獨的一行列表，及其對應的刪除提示&設爲完成提示，建立組件。利用組件複製出多個列表並添加到滾頁容器中，實現基本視效。

基本視效界面

Step 2

進入組件，首先實現列表的左右滑動，使其支持拖拽進行橫向移動，並監聽列表的X的位置判斷左右移動的方向顯示刪除提示或設爲完成提示。

拖拽及監聽設置

Step 3

添加抬起觸發，當抬起列表時。基於之前的橫滑範圍及具體操作的分析，設定列表X不同範圍區間下抬起操作的對應反應。

其中當列表的X≥327對應直接設爲完成的範圍下，對預先設置的文字蒙層及刪除線添加大小變化，大小變至表達式length(`task name`.text)*9。

列表抬起觸發設置

Step 4

當用戶拖動過程中，列表X的值在直接刪除或直接設爲完成的範圍內時，移動delete及checked的圖標以提示操作直接生效，但當用戶拖動到其他三個範圍內時則將delete及checked圖標移動至初始位置。在對列表X的監聽中增加對於的條件及反應設置。

列表 位置X的監聽設置

Step 5

在組件中對delete及checked圖標添加單擊觸發，使其在點擊後實現列表刪除或設爲完成的對應反應。可以測試一下，到這一步列表組件的部分就實現完成了。

delete & checked 圖標單擊觸發設置

Step 6

回到場景中，我們會發現目前就遺留一個問題就是，當任務列表刪除後，組件中設置的列表高度縮放消失，在列表序列中會導致新增出空缺行的問題。

爲解決這問題，我們需要在場景中對每一個調用的列表組件添加一個高度比的監聽觸發，當其高度發生縮放時（刪除操作生效時），向上移動該列表之下的所有列表組件。

案例中一共設置了9行列表，所以對應第4行列表高度變化時，第5-9行都需要增加一個向上移動的設置如下圖所示。

組件 高度比 監聽設置

所有設置都完成後，便可以在預覽窗中連接手機查看效果啦~~

案例源文件下載&預覽

https://cloud.protopie.io/p/2dbc6cb9d4

本文由 @二樓自習室 原創發佈於人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基於CC0協議

相關文章