国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

對(duì)單條列表進(jìn)行橫向滑動(dòng)顯示其支持的操作項(xiàng)，是一種比較常見的移動(dòng)端交互方式。本案例將以任務(wù)列表頁(yè)面為例，使用Protopie軟件來實(shí)現(xiàn)單條任務(wù)列表左滑刪除、右滑設(shè)為完成的效果。

涉及到的基本Protopie功能

• Protopie組件的使用
• 觸發(fā)：拖拽、監(jiān)聽、抬起、長(zhǎng)按
• 反應(yīng)：移動(dòng)、透明度、大小

實(shí)現(xiàn)效果

案例具體實(shí)現(xiàn)效果

本案例在任務(wù)列表頁(yè)面中對(duì)于單條列表均支持左右滑動(dòng)。向左滑動(dòng)顯示刪除操作，當(dāng)滑動(dòng)超過設(shè)定距離或點(diǎn)擊刪除按鈕時(shí)，刪除該條任務(wù)并將之后當(dāng)任務(wù)進(jìn)行上移。向右滑動(dòng)顯示設(shè)為已完成操作，同樣的當(dāng)滑動(dòng)距離超過設(shè)定距離或點(diǎn)擊設(shè)為完成按鈕時(shí)，對(duì)任務(wù)文本添加刪除線表示其已完成。

案例源文件下載&預(yù)覽

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

實(shí)現(xiàn)思路

3.1 左后橫滑的操作及范圍分析

由于單條列表是支持左右滑動(dòng)，并基于用戶的滑動(dòng)距離實(shí)現(xiàn)不同的反饋，這在Protopie中主要通過用戶滑動(dòng)操作抬起后列表本身的位置X來進(jìn)行判斷的。

如圖所示，將界面的橫軸分為5個(gè)不同區(qū)段，分別為直接刪除區(qū)域、顯示刪除按鈕區(qū)域、不顯示操作項(xiàng)區(qū)域、顯示設(shè)為完成按鈕區(qū)域、直接設(shè)為完成區(qū)域，當(dāng)用戶抬起操作執(zhí)行時(shí)，列表錨點(diǎn)X落入不同范圍執(zhí)行對(duì)應(yīng)操作。

操作范圍圖示

3.2 利用組件提升效率

Protopie在4.0版本上新增了組件功能，通過建立組件，可以將同類的動(dòng)效組件快速應(yīng)用到不同場(chǎng)景，避免不必要的重復(fù)性工作，提高原型制作效率。本案例中的任務(wù)列表頁(yè)面中每個(gè)單條的列表支持的觸發(fā)及反應(yīng)一致，可以通過建立單條列表的組件并在具體場(chǎng)景中復(fù)用，來減少重復(fù)設(shè)置提升效率。

新建組件：一種是在具體場(chǎng)景頁(yè)面中選取要建立的組件所涉及的所有圖層，點(diǎn)擊上端的“組件”或者右鍵選擇“創(chuàng)建組件”實(shí)現(xiàn)組件的建立。另一種可以直接在組件管理面板中點(diǎn)擊加號(hào)新建一個(gè)空的組件對(duì)象。

添加組件的兩種方式入口

使用及編輯組件：組件編輯完成后，回到場(chǎng)景，可以直接將編輯好的組件從左側(cè)拖入到畫板，實(shí)現(xiàn)組件的調(diào)用。根據(jù)使用場(chǎng)景的不同，可以對(duì)組件做單獨(dú)調(diào)整，像本案例中可以編輯列表中的文本內(nèi)容。

如果需要調(diào)整組件母版，點(diǎn)擊左側(cè)的組件圖標(biāo)，雙擊要修改的組件即可編輯。還可以在場(chǎng)景中選中一個(gè)調(diào)整后的組件，勾選“設(shè)置為母版組件”，完成后組件組件在圖層列表中的顏色變化，這樣對(duì)其的調(diào)整會(huì)同步到其他組件上。

設(shè)置為母版組件方式及設(shè)置成功后視效差異

3.3 不同長(zhǎng)度文本的刪除線添加

案例中當(dāng)任務(wù)列表設(shè)為完成后對(duì)具體的文本會(huì)添加刪除線，并且刪除線有從左向右展開的動(dòng)效。Protopie中文本的樣式中沒有刪除線的設(shè)置，所以實(shí)現(xiàn)是我們需要使用矩形來實(shí)現(xiàn)。同時(shí)由于對(duì)于列表我們使用了組件，所以具體效果需要根據(jù)文本的長(zhǎng)度實(shí)現(xiàn)調(diào)整。

這里涉及Protopie中的文本處理表達(dá)式 length(source:TEXT)，支持計(jì)算文本的長(zhǎng)度（字符數(shù)+空格數(shù)），乘上單個(gè)文字的長(zhǎng)度就可以獲得文本刪除線的寬度。

文本長(zhǎng)度函數(shù)說明

具體實(shí)現(xiàn)步驟

Step 1

新建Protopie文件，將Figma的頁(yè)面設(shè)計(jì)文檔導(dǎo)入到Protopie中。選擇單獨(dú)的一行列表，及其對(duì)應(yīng)的刪除提示&設(shè)為完成提示，建立組件。利用組件復(fù)制出多個(gè)列表并添加到滾頁(yè)容器中，實(shí)現(xiàn)基本視效。

基本視效界面

Step 2

進(jìn)入組件，首先實(shí)現(xiàn)列表的左右滑動(dòng)，使其支持拖拽進(jìn)行橫向移動(dòng)，并監(jiān)聽列表的X的位置判斷左右移動(dòng)的方向顯示刪除提示或設(shè)為完成提示。

拖拽及監(jiān)聽設(shè)置

Step 3

添加抬起觸發(fā)，當(dāng)抬起列表時(shí)。基于之前的橫滑范圍及具體操作的分析，設(shè)定列表X不同范圍區(qū)間下抬起操作的對(duì)應(yīng)反應(yīng)。

其中當(dāng)列表的X≥327對(duì)應(yīng)直接設(shè)為完成的范圍下，對(duì)預(yù)先設(shè)置的文字蒙層及刪除線添加大小變化，大小變至表達(dá)式length(`task name`.text)*9。

列表抬起觸發(fā)設(shè)置

Step 4

當(dāng)用戶拖動(dòng)過程中，列表X的值在直接刪除或直接設(shè)為完成的范圍內(nèi)時(shí)，移動(dòng)delete及checked的圖標(biāo)以提示操作直接生效，但當(dāng)用戶拖動(dòng)到其他三個(gè)范圍內(nèi)時(shí)則將delete及checked圖標(biāo)移動(dòng)至初始位置。在對(duì)列表X的監(jiān)聽中增加對(duì)于的條件及反應(yīng)設(shè)置。

列表 位置X的監(jiān)聽設(shè)置

Step 5

在組件中對(duì)delete及checked圖標(biāo)添加單擊觸發(fā)，使其在點(diǎn)擊后實(shí)現(xiàn)列表刪除或設(shè)為完成的對(duì)應(yīng)反應(yīng)。可以測(cè)試一下，到這一步列表組件的部分就實(shí)現(xiàn)完成了。

delete & checked 圖標(biāo)單擊觸發(fā)設(shè)置

Step 6

回到場(chǎng)景中，我們會(huì)發(fā)現(xiàn)目前就遺留一個(gè)問題就是，當(dāng)任務(wù)列表刪除后，組件中設(shè)置的列表高度縮放消失，在列表序列中會(huì)導(dǎo)致新增出空缺行的問題。

為解決這問題，我們需要在場(chǎng)景中對(duì)每一個(gè)調(diào)用的列表組件添加一個(gè)高度比的監(jiān)聽觸發(fā)，當(dāng)其高度發(fā)生縮放時(shí)（刪除操作生效時(shí)），向上移動(dòng)該列表之下的所有列表組件。

案例中一共設(shè)置了9行列表，所以對(duì)應(yīng)第4行列表高度變化時(shí)，第5-9行都需要增加一個(gè)向上移動(dòng)的設(shè)置如下圖所示。

組件 高度比 監(jiān)聽設(shè)置

所有設(shè)置都完成后，便可以在預(yù)覽窗中連接手機(jī)查看效果啦~~

本文由 @二樓自習(xí)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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