起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)Axure教程：中繼器如何加載顯示圖片
編輯導(dǎo)語(yǔ)：在原型設(shè)計(jì)中，很多場(chǎng)景會(huì)應(yīng)用到“中繼器”這個(gè)元件。那么中繼器如何加載顯示圖片的操作？很多新手都會(huì)無(wú)從下手。本文作者詳細(xì)講解了中繼器加載顯示圖片的方法，供你學(xué)習(xí)。
一、元件準(zhǔn)備
- 一個(gè)中繼器
- 一個(gè)表格
- 一個(gè)圖片元件（加載圖片的重點(diǎn)）
二、元件設(shè)置
下面分步驟講解各個(gè)元件的設(shè)置。
1. 設(shè)置表格列頭
把表格設(shè)置成5列（無(wú)邊框），每列的文字編輯分別為：學(xué)號(hào)、姓名、性別、頭像、民族。如下圖所示：
2. 設(shè)置中繼器
拖拽一個(gè)中繼器起名為：列表內(nèi)容。把原有的一列新增到5列，并分別起名：xuehao、xingming、xingbie、touxiang、minzu。并設(shè)置寬、高都為：100。如下圖所示：
3. 圖片設(shè)置（重點(diǎn)）
拖拽一個(gè)圖片起名：touxiang。放入“頭像”列中，設(shè)置寬、高都為85。如下圖所示：
4. 中繼器填充內(nèi)容
對(duì)除了“頭像”外的其他列填寫(xiě)內(nèi)容。如下圖所示：
對(duì)“頭像”列進(jìn)行設(shè)置。首先選中一個(gè)單元格右鍵，選擇“導(dǎo)入圖片”，并選擇準(zhǔn)備好的本地圖片。設(shè)置好的效果如下圖所示：
三、交互設(shè)置
1. 文本交互
把學(xué)號(hào)、姓名、性別、民族這4列，加載時(shí)設(shè)置文本，每列值選擇對(duì)應(yīng)的函數(shù)。設(shè)置后的效果如下圖所示：
2. 圖片交互
把頭像這列，加載時(shí)設(shè)置圖片，并選中圖片“touxiang”，設(shè)置DEFAULT圖片：選中“值”，選擇函數(shù)：[[Item.touxiang]]。設(shè)置后的效果如下圖所示：
四、展示效果
按上面的步驟設(shè)置完成之后，最終的展示效果會(huì)如下圖所示：
本文由 @龍角星宿 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自Unsplash，基于CC0協(xié)議
想問(wèn)下圖片交互那里怎么才能選到：“touxiang”呢？我只能選到圖片，選不到“touxiang”這個(gè)字段