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

2 評論 7365 瀏覽 15 收藏 8 分鐘

編輯導(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é)議。

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 分頁加載的效果是怎么弄的?

    來自河北 回復(fù)
  2. 希望作者有空出個Axure快速入門教程,比如設(shè)計一個典型網(wǎng)站或者app的過程。

    回復(fù)