Axure教程:中繼器如何加載顯示圖片

0 評論 8090 瀏覽 11 收藏 4 分鐘

編輯導語:在原型設計中,很多場景會應用到“中繼器”這個元件。那么中繼器如何加載顯示圖片的操作?很多新手都會無從下手。本文作者詳細講解了中繼器加載顯示圖片的方法,供你學習。

一、元件準備

  • 一個中繼器
  • 一個表格
  • 一個圖片元件(加載圖片的重點)

二、元件設置

下面分步驟講解各個元件的設置。

1. 設置表格列頭

把表格設置成5列(無邊框),每列的文字編輯分別為:學號、姓名、性別、頭像、民族。如下圖所示:

2. 設置中繼器

拖拽一個中繼器起名為:列表內容。把原有的一列新增到5列,并分別起名:xuehao、xingming、xingbie、touxiang、minzu。并設置寬、高都為:100。如下圖所示:

3. 圖片設置(重點)

拖拽一個圖片起名:touxiang。放入“頭像”列中,設置寬、高都為85。如下圖所示:

4. 中繼器填充內容

對除了“頭像”外的其他列填寫內容。如下圖所示:

對“頭像”列進行設置。首先選中一個單元格右鍵,選擇“導入圖片”,并選擇準備好的本地圖片。設置好的效果如下圖所示:

三、交互設置

1. 文本交互

把學號、姓名、性別、民族這4列,加載時設置文本,每列值選擇對應的函數。設置后的效果如下圖所示:

2. 圖片交互

把頭像這列,加載時設置圖片,并選中圖片“touxiang”,設置DEFAULT圖片:選中“值”,選擇函數:[[Item.touxiang]]。設置后的效果如下圖所示:

四、展示效果

按上面的步驟設置完成之后,最終的展示效果會如下圖所示:

 

本文由 @龍角星宿 原創發布于人人都是產品經理,未經許可,禁止轉載

題圖來自Unsplash,基于CC0協議

給作者打賞,鼓勵TA抓緊創作!
更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 目前還沒評論,等你發揮!