起點(diǎn)課堂會(huì)員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會(huì)特權(quán)
個(gè)人IP打造特權(quán)
30+門(mén)專項(xiàng)技能課
1300+專題課程
12場(chǎng)職場(chǎng)軟技能直播
12場(chǎng)求職輔導(dǎo)直播
12場(chǎng)專業(yè)技能直播
會(huì)員專屬社群
榮耀標(biāo)識(shí)中繼器系列（五）：發(fā)布動(dòng)態(tài)9宮格圖片
在Axure操作中，中繼器肯定算事比較高階的一個(gè)功能之一；通過(guò)中繼器，可以完成很多復(fù)雜的交互動(dòng)效。這篇文章，作者分享童女中繼器完成九宮格圖片的設(shè)計(jì)，希望能幫到你。
前期準(zhǔn)備
電腦：mac和win都可以（案例以win系統(tǒng)為例，mac類(lèi)似）。
軟件：Axure 9 系列（Axure 8類(lèi)似）。
熟練程度：中級(jí)（元件使用，函數(shù)調(diào)用）。
相關(guān)使用元件：矩形、文本、SVG（形狀）圖標(biāo)、動(dòng)態(tài)面板、圖片、中繼器。
原型元件組成展示
演示動(dòng)圖
正文（制作過(guò)程）
制作思路
整個(gè)發(fā)布動(dòng)態(tài)的九宮格圖片由兩個(gè)頁(yè)面組成，在每個(gè)頁(yè)面中各自存在一個(gè)中繼器，進(jìn)行數(shù)據(jù)的存儲(chǔ)。通過(guò)中繼器的函數(shù)進(jìn)行數(shù)據(jù)的傳遞，達(dá)到選中展示的效果。
注：由于中繼器函數(shù)需要在同一頁(yè)面中繼器中使用，所以需要將兩個(gè)頁(yè)面放置于同一畫(huà)布。通過(guò)顯示隱藏的交互達(dá)到切換的效果。
簡(jiǎn)單原型
在整個(gè)交互邏輯中，最重要的一步就是中繼器之間的交互傳值。下面詳細(xì)介紹之間的交互邏輯。
第一步：創(chuàng)建兩個(gè)中繼器。（展示中繼器：用于后期九宮格的展示。選項(xiàng)中繼器：模擬手機(jī)圖片庫(kù)）。
第二步：修改中繼器內(nèi)部?jī)?nèi)容為圖片元件對(duì)應(yīng)命名為展示圖片、選項(xiàng)圖片。
第三步：給選項(xiàng)中繼器進(jìn)行圖片配置。
①配置交互事件，每項(xiàng)加載時(shí)設(shè)置選項(xiàng)圖片為中繼器中導(dǎo)入的對(duì)應(yīng)圖片。
②進(jìn)行中繼器圖片的導(dǎo)入(在中繼器對(duì)應(yīng)數(shù)據(jù)欄右鍵選擇導(dǎo)入圖片選項(xiàng)）。導(dǎo)入完成后，可以看到對(duì)應(yīng)的中繼器中已經(jīng)加載對(duì)應(yīng)的圖片。
注：為了界面展示美觀，圖片使用應(yīng)該是相同等比的圖片。
第四步：設(shè)置選項(xiàng)中繼器的交互。通過(guò)點(diǎn)擊選項(xiàng)中繼器，進(jìn)行對(duì)應(yīng)圖片傳遞給展示中繼器。
①：配置圖片單擊交互事件，添加展示中繼器行。
②：點(diǎn)擊添加行，配置對(duì)應(yīng)數(shù)據(jù)。（注意：只需要添加一行）
③：配置參數(shù)，選擇當(dāng)前中繼器的參數(shù)。
④：點(diǎn)擊預(yù)覽，查看對(duì)應(yīng)效果。
注：
1、只能通過(guò)預(yù)覽查看對(duì)應(yīng)效果。
2、如果展示圖片有三張沒(méi)有加載出來(lái)，就是因?yàn)闆](méi)有在預(yù)覽前清空預(yù)覽中繼器。
⑤：此時(shí)已經(jīng)完成了整個(gè)的核心邏輯。下面部分簡(jiǎn)單講述下后續(xù)細(xì)節(jié)優(yōu)化的思路，有不太清楚的小伙伴可以在文章下留言，或關(guān)注公眾號(hào)獲取源文件。
細(xì)節(jié)優(yōu)化
如何設(shè)置展示中繼器的加號(hào)
思路：設(shè)置一張加號(hào)的圖片，通過(guò)判斷其中繼器數(shù)據(jù)來(lái)控制其隱藏。
如何設(shè)置圖片超過(guò)9張的數(shù)字
思路：首先設(shè)置文本，當(dāng)展示中繼器的數(shù)據(jù)大于9條時(shí)，通過(guò)展示中繼器條數(shù)-9的差值
如何設(shè)置一張圖片、兩張圖片展示效果
思路：同樣獲取中繼器的數(shù)據(jù)，根據(jù)數(shù)據(jù)，改變?cè)械膬?nèi)部圖片的尺寸。
總結(jié)
主要是中繼器的聯(lián)動(dòng)賦值與中繼器數(shù)據(jù)的判斷。
更多中繼器系列文章
中繼器系列（四）：正反倒計(jì)時(shí)元件的實(shí)現(xiàn)
本文由 @Brose 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來(lái)自 Unsplash，基于 CC0 協(xié)議
請(qǐng)問(wèn)方便上傳到百度云嗎??想下載學(xué)習(xí)
可以，留個(gè)郵箱，我發(fā)你