編輯導(dǎo)語：瀑布流列表是常見的列表顯示形式，那么，如何用中繼器制作瀑布流列表？本篇文章里，作者詳細(xì)介紹了用中繼器制作瀑布流列表、支持對列表卡片進(jìn)行刪除、刪除后自動補(bǔ)位的具體流程操作，一起來看一下。

本文介紹使用中繼器制作瀑布流列表的方法，支持對瀑布流列表中的卡片進(jìn)行刪除，刪除后自動補(bǔ)位，保證瀑布流布局的完整。

交互效果如下圖：

一、實(shí)現(xiàn)瀑布流布局

思路：中繼器加載時，令卡片中的圖片高度各異，從而實(shí)現(xiàn)瀑布流參差不齊的布局效果。

1. 在中繼器中放置元件，并對各個元件命名

1）元件命名

• 圖片元件命名為img，用于放置商品圖。我這里設(shè)置圖片寬度為168。
• 文本元件命名為title，用于顯示商品名稱。并將該文本元件轉(zhuǎn)化為動態(tài)面板，不勾選“自動調(diào)整為內(nèi)容尺寸”，設(shè)置動態(tài)面板高度為40，保證商品名稱至多顯示2行。
• 文本元件命名為price，用于顯示商品單價。
• 將除圖片（img）外的其它元件進(jìn)行組合，該組合命名為“卡片文字”，用于加載時將該組合區(qū)域移動至圖片下方。
• 最后將“img”和“卡片文字”組合，該組合命名為“card”，這個組合后續(xù)會用到。

2）中繼器列表表頭命名

• img：商品圖。
• titile：商品名稱。
• price：商品單價。
• height：圖片高度，用于加載時將圖片高度調(diào)整為height中的指定值。

2. 為中繼器中的元件進(jìn)行賦值，并添加交互

中繼器添加動作，每項加載時：

• 設(shè)置文本，title=[[Item.title]]，price=[[Item.price]]：商品名稱及商品單價的賦值。
• 設(shè)置圖片，img=[[Item.img]]：商品圖的賦值。
• 設(shè)置商品圖img尺寸，img的寬=[[Target.width]] ，img的高=[[Item.height]] : 保持img寬度不變，根據(jù)中繼器height中寫入值，調(diào)整img為指定高度。
• 移動“卡片文字”組合到絕對位置，x=0，y=[[Item.height]]：將“卡片文字”組合移動到img的下方。（如設(shè)置了img的圖片圓角，為了確保img底邊圓角不露出來，y=[[Item.height-n]]，n是圓角半徑。）

3. 設(shè)置中繼器樣式，形成瀑布流布局

設(shè)置中繼器布局為“垂直”、“網(wǎng)絡(luò)排布”，每排項目數(shù)為3。

注：每排項目數(shù)可以設(shè)定為任意值m，如中繼器中寫入的數(shù)據(jù)行數(shù)=2m，瀑布流顯示為兩列；如中繼器中寫入的數(shù)據(jù)行數(shù)=3m，瀑布流顯示為三列……以此類推。

設(shè)置中繼器分頁為多頁顯示，每頁項目數(shù)為6，起始頁為1.

注：布局中每排項目數(shù)為m，如需要瀑布流顯示為兩列，則每頁項目數(shù)為2m；如需要瀑布流顯示三列，則每頁項目數(shù)為3m……以此類推。

設(shè)置中繼器間距，我這里設(shè)置行=10；列=10。

4. 中繼器中填入數(shù)據(jù)，完成瀑布流布局展示

至少寫入6行數(shù)據(jù)（這是由于設(shè)置中繼器樣式時，布局中每排項目數(shù)為3）。

注：每排項目數(shù)=m時，中繼器寫入的數(shù)據(jù)>=2m。

二、實(shí)現(xiàn)刪除卡片自動補(bǔ)位的效果

思路：刪除中繼器當(dāng)前行(this），同時在中繼器中新增4行數(shù)據(jù)，實(shí)現(xiàn)自動補(bǔ)位。設(shè)置中繼器分頁為多頁顯示，保證頁面中顯示固定個數(shù)的卡片。

1. 制作卡片遮罩及刪除按鈕

在中繼器中制作一個#000000，透明的50%的遮罩，命名為“遮罩背景”，并在遮罩上水平居中、垂直居中放置刪除按鈕。（我這里放置了三個按鈕，“不感興趣”、“屏蔽同類”、“圖片引起不適”，都是刪除數(shù)據(jù)行的操作）

將遮罩和按鈕進(jìn)行組合，命名為“刪除按鈕區(qū)”。默認(rèn)隱藏。

中繼器添加動作，每項加載時：

增加動作：設(shè)置“遮罩背景”尺寸，寬=[[img.width]]（設(shè)置局部變量img=圖片元件img，也就是中繼器中的商品圖），高=[[card.height]]（設(shè)置局部變量card=卡片組合card，也就是包括商品圖、卡片文字的整個卡片區(qū)域）。

2. 添加刪除卡片及新增行的交互

“刪除按鈕”添加交互，鼠標(biāo)單擊時：

• 刪除行，this（當(dāng)前行）從中繼器（我將該中繼器命名為“瀑布流列表”）。
• 添加行，4行 為中繼器（“瀑布流列表”），建議寫入4行不同的數(shù)據(jù)，補(bǔ)位效果比較好。
• 隱藏“刪除按鈕區(qū)”，也就是將遮罩和按鈕隱藏掉。

“遮罩背景”添加交互，鼠標(biāo)單擊時：

隱藏“刪除按鈕區(qū)”。實(shí)現(xiàn)點(diǎn)擊黑色半透明遮罩時隱藏“刪除按鈕區(qū)”的效果。

三、實(shí)現(xiàn)滑動效果

最后，將中繼器轉(zhuǎn)換為動態(tài)面板，屬性中取消“自動調(diào)整為內(nèi)容尺寸”，滾動條設(shè)置為“自動顯示垂直滾動條”

調(diào)整動態(tài)面板的高度<中繼器的高度，實(shí)現(xiàn)列表上、下滑動的效果。

本文由 @holo咩 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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