Axure中利用中繼器快速實(shí)現(xiàn)APP中設(shè)置面的各種列表選項(xiàng)

1、中繼器是 AxureAxure 中的一個高級元件，可以當(dāng)做 AxureAxure 中的小型數(shù)據(jù)庫使用，用于實(shí)現(xiàn)一些增刪查改的效果，同時可用于一些具有相同元件組合的組件的快速生成，比如 APPAPP 中的設(shè)置,如下圖所示。下面我們介紹一下怎么用中繼器實(shí)現(xiàn)。隱私用口i i 隹可以評觸所有人通用 igBigB 帶圖標(biāo)金語言簡體中文開啟 WifiWifi口直播設(shè)置中繼器基礎(chǔ)知識我們先介紹一下中繼器的基礎(chǔ)知識，拖入一個中繼器，可以看到顯示的是縱排的三個矩形框，框中內(nèi)容分為為 123,123,交互中有一個事件每項(xiàng)加載時， 元件動作是設(shè)置矩形框的文本為 Item.Column0Item.Column0, ,

2、點(diǎn)擊樣式，可以看到有一個數(shù)據(jù)表格，默認(rèn)只有一列 Column0Column0 列中數(shù)據(jù)為123123。雙擊中繼器，可以看到其中只有一個矩形框。從中不難看出以下幾點(diǎn)：1 1）雙擊進(jìn)入中繼器后，添加的各種元件相當(dāng)于中繼器本身的模板，后面會按這個模板進(jìn)行渲染；2 2）模板渲染多少次是由樣式中數(shù)據(jù)表的行數(shù)決定的，比如默認(rèn)只有三行數(shù)據(jù)，就只生成了三個矩形框；3)3)樣式表中的每一行數(shù)據(jù)就是每次渲染時可以傳入模板中的數(shù)據(jù)，數(shù)據(jù)傳入需要通過中繼器的每項(xiàng)加載時”這個事件進(jìn)行觸發(fā)設(shè)置，比如比如默認(rèn)的是把 Column0Column0 這列的數(shù)據(jù)傳給了矩形框。通過增加列，可以增加每次渲染時可以使用的數(shù)據(jù)，列名可以

3、自定義(英文字符)。圖表的，應(yīng)該要包含一下元件：1)1) 一個矩形框，用于規(guī)定模板的邊界大小，同時用于裝載選項(xiàng)的名字，邊框不顯示，元件命名為”選項(xiàng)名：注意設(shè)置文字的左邊距；2)2) 一個 swichswich 切換開關(guān)；3)3) 一個標(biāo)簽，用于存放右側(cè)的提示文字，命名為”提示文字：注意選擇右對齊;4)4) 一個“符號；5)5) 一根直線，放于底邊，作為每行的分隔線，命名為“分隔線：如下圖所示，把這幾個元素組合好。點(diǎn)擊后按鈕開始添加新 fl首先我們要確定一下我們的模板組成，對于不帶最后，數(shù)據(jù)表中的數(shù)據(jù)除了字符串外，通過右鍵還可以引入圖片或則頁面，這個功能非常強(qiáng)在數(shù)據(jù)表中輸入下面的內(nèi)容，一共四行數(shù)

4、據(jù)，表示我們要生成四個選項(xiàng)。namename 表示選項(xiàng)名；swsw 讓 chch 為標(biāo)志位，如果需要使用開關(guān)按鈕就填入 true,true,否則不填為 truetrue 時后面都不用填;optionoption 是選項(xiàng)右側(cè)的文字，如果不需要則不填；dayufudayufu 為標(biāo)志位，需要顯示大于符號時填 true,true,與 switchswitch 不能同時設(shè)置；pageUrlpageUrl 用于引用頁面，對于設(shè)置了大于符號的項(xiàng)，一般都要跳轉(zhuǎn)頁面，直接引用該頁面即可。nameswrtchoption：dayufupageUrl添加列語言簡體中文truetrue語言EJEJ隱私用戶true誰

5、可以評論我所有人true誕可以評論目true添加行數(shù)據(jù)和模板都設(shè)置好了，下面要控制每一項(xiàng)渲染時的數(shù)據(jù)傳入，首先先設(shè)置文字類的數(shù)據(jù),主要有兩個：1 1）把模板中的選項(xiàng)名設(shè)置為 I;I;2 2）把提示文字設(shè)置為 Item.optionItem.option。通過 fxfx 中插入變量，ItemItem 表示中繼器本身。簡體中文瞪私用戶誰可以評論我通用設(shè)置接下來就是控制顯示 switchswitch 開關(guān)還是顯示”符號，這個可以為模板添加載入事件，在載入時判斷改行的數(shù)據(jù)switchswitch 是否為 true,true,不為 truetrue 時將其隱藏，否則將”提

6、示文字和”符號隱藏：I甑工加上11111111k k人北口|-tiUe-tiUe- -I*i-JS皿*H三示他說斯 EX舞宿文亞生通臉尺文卑為里在斷電去在立虹;在工+.9sa：-J”克里廿War其取金型”.黃嚴(yán)的詈削庭；-搔人表達(dá)式【的遇*VarB),我收為盧4聞.氈A多生量三|舊小川河，心.貨通刖出的咎由.五兄兄IT心二年字母整字不先聲色力士網(wǎng).市消這樣設(shè)置以后，顯示如下:語言簡體中文所有人中亨富制品集-Fir-.l-Fir-.lM最后為模板添加一個單擊事件，當(dāng) pageUrlpageUrl 不為空時，執(zhí)行打開鏈接的操作最后，最后一項(xiàng)一般是沒有分隔線的，這個可以用到中繼器中的一個變量 isL

7、ast,isLast,就是當(dāng)前項(xiàng)是不是中繼器中的最后一項(xiàng)，是的話，這個值是 truetrue。因此我們可以單獨(dú)為下劃線加入一個載入時的事件（放在模板組合上也可以），這樣最后一項(xiàng)的分隔線就不顯示了。帶圖標(biāo)的下面在以上的基礎(chǔ)上再實(shí)現(xiàn)一個帶圖標(biāo)的，有了以上基礎(chǔ)，其實(shí)就比較簡單了，就是在模板里面添加一個圖片元件。在數(shù)據(jù)表中增加一列 pic,pic,右鍵從本地引入圖標(biāo)（推薦從阿里巴巴矢量圖標(biāo)庫下載 pngpng 圖片）然后在每項(xiàng)加載時”增加一個設(shè)置圖片的元件動作即可。由于有些 pngpng 圖片的空白邊距過大,可能導(dǎo)致顯示的圖標(biāo)大小不一，所以可以先把圖標(biāo)自己編輯一下。T抵項(xiàng)加載時設(shè)置文本選頊名為qtltemnameqtltemname1 1, ,選項(xiàng)文字為PtemopcionlPtemopcionl設(shè)置圖片圖插為gEEgEEpitpit最后，中繼器自身還有一些變量如 index:i