Axure教程:中繼器製作瀑布流列表

編輯導語:瀑布流列表是常見的列表顯示形式,那麼,如何用中繼器製作瀑布流列表?本篇文章裡,作者詳細介紹了用中繼器製作瀑布流列表、支援對列表卡片進行刪除、刪除後自動補位的具體流程操作,一起來看一下。

Axure教程:中繼器製作瀑布流列表

本文介紹使用中繼器製作瀑布流列表的方法,支援對瀑布流列表中的卡片進行刪除,刪除後自動補位,保證瀑布流佈局的完整。

互動效果如下圖:

Axure教程:中繼器製作瀑布流列表

一、實現瀑布流佈局

思路:中繼器載入時,令卡片中的圖片高度各異,從而實現瀑布流參差不齊的佈局效果。

1. 在中繼器中放置元件,並對各個元件命名

Axure教程:中繼器製作瀑布流列表

1)元件命名

圖片元件命名為img,用於放置商品圖。我這裡設定圖片寬度為168。

文字元件命名為title,用於顯示商品名稱。並將該文字元件轉化為動態面板,不勾選“自動調整為內容尺寸”,設定動態面板高度為40,保證商品名稱至多顯示2行。

文字元件命名為price,用於顯示商品單價。

將除圖片(img)外的其它元件進行組合,該組合命名為“卡片文字”,用於載入時將該組合區域移動至圖片下方。

最後將“img”和“卡片文字”組合,該組合命名為“card”,這個組合後續會用到。

2)中繼器列表表頭命名

img:商品圖。

titile:商品名稱。

price:商品單價。

height:圖片高度,用於載入時將圖片高度調整為height中的指定值。

2. 為中繼器中的元件進行賦值,並新增互動

Axure教程:中繼器製作瀑布流列表

中繼器新增動作,每項載入時:

設定文字,title=[[Item。title]],price=[[Item。price]]:商品名稱及商品單價的賦值。

設定圖片,img=[[Item。img]]:商品圖的賦值。

設定商品圖img尺寸,img的寬=[[Target。width]] ,img的高=[[Item。height]] : 保持img寬度不變,根據中繼器height中寫入值,調整img為指定高度。

移動“卡片文字”組合到絕對位置,x=0,y=[[Item。height]]:將“卡片文字”組合移動到img的下方。(如設定了img的圖片圓角,為了確保img底邊圓角不露出來,y=[[Item。height-n]],n是圓角半徑。)

3. 設定中繼器樣式,形成瀑布流佈局

Axure教程:中繼器製作瀑布流列表

設定中繼器佈局為“垂直”、“網路排布”,每排專案數為3。

注:每排專案數可以設定為任意值m,如中繼器中寫入的資料行數=2m,瀑布流顯示為兩列;如中繼器中寫入的資料行數=3m,瀑布流顯示為三列……以此類推。

設定中繼器分頁為多頁顯示,每頁專案數為6,起始頁為1。

注:佈局中每排專案數為m,如需要瀑布流顯示為兩列,則每頁專案數為2m;如需要瀑布流顯示三列,則每頁專案數為3m……以此類推。

設定中繼器間距,我這裡設定行=10;列=10。

4. 中繼器中填入資料,完成瀑布流佈局展示

至少寫入6行資料(這是由於設定中繼器樣式時,佈局中每排專案數為3)。

注:每排專案數=m時,中繼器寫入的資料>=2m。

二、實現刪除卡片自動補位的效果

思路:刪除中繼器當前行(this),同時在中繼器中新增4行資料,實現自動補位。設定中繼器分頁為多頁顯示,保證頁面中顯示固定個數的卡片。

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

Axure教程:中繼器製作瀑布流列表

在中繼器中製作一個#000000,透明的50%的遮罩,命名為“遮罩背景”,並在遮罩上水平居中、垂直居中放置刪除按鈕。(我這裡放置了三個按鈕,“不感興趣”、“遮蔽同類”、“圖片引起不適”,都是刪除資料行的操作)

將遮罩和按鈕進行組合,命名為“刪除按鈕區”。預設隱藏。

中繼器新增動作,每項載入時:

增加動作:設定“遮罩背景”尺寸,寬=[[img。width]](設定區域性變數img=圖片元件img,也就是中繼器中的商品圖),高=[[card。height]](設定區域性變數card=卡片組合card,也就是包括商品圖、卡片文字的整個卡片區域)。

2. 新增刪除卡片及新增行的互動

Axure教程:中繼器製作瀑布流列表

“刪除按鈕”新增互動,滑鼠單擊時:

刪除行,this(當前行)從中繼器(我將該中繼器命名為“瀑布流列表”)。

新增行,4行 為中繼器(“瀑布流列表”),建議寫入4行不同的資料,補位效果比較好。

隱藏“刪除按鈕區”,也就是將遮罩和按鈕隱藏掉。

“遮罩背景”新增互動,滑鼠單擊時:

隱藏“刪除按鈕區”。實現點選黑色半透明遮罩時隱藏“刪除按鈕區”的效果。

三、實現滑動效果

最後,將中繼器轉換為動態面板,屬性中取消“自動調整為內容尺寸”,捲軸設定為“自動顯示垂直捲軸”

調整動態面板的高度

本文由 @holo咩 原創釋出於人人都是產品經理,未經作者許可,禁止轉載。

題圖來自Unsplash,基於CC0協議。

頂部