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

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

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

交互效果如下圖：

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

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

1. 在中繼器中放置元件，并對(duì)各個(gè)元件命名

1）元件命名

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

2）中繼器列表表頭命名

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

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

中繼器添加動(dòng)作，每項(xiàng)加載時(shí)：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

中繼器添加動(dòng)作，每項(xiàng)加載時(shí)：

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

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

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

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

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

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

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

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

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

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

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