中繼器是Axure中的一個(gè)高級(jí)元件,可以當(dāng)做Axure中的小型數(shù)據(jù)庫使用,用于實(shí)現(xiàn)一些增刪查改的效果,同時(shí)可用于一些具有相同元件組合的組件的快速生成,比如APP中的設(shè)置,如下圖所示。下面我們介紹一下怎么用中繼器實(shí)現(xiàn)。
中繼器基礎(chǔ)知識(shí)
我們先介紹一下中繼器的基礎(chǔ)知識(shí),拖入一個(gè)中繼器,可以看到顯示的是縱排的三個(gè)矩形框,框中內(nèi)容分為為1,2,3,交互中有一個(gè)事件每項(xiàng)加載時(shí),元件動(dòng)作是設(shè)置矩形框的文本為Item.Column0,點(diǎn)擊樣式,可以看到有一個(gè)數(shù)據(jù)表格,默認(rèn)只有一列Column0,列中數(shù)據(jù)為1,2,3。雙擊中繼器,可以看到其中只有一個(gè)矩形框。
從中不難看出以下幾點(diǎn):
1)雙擊進(jìn)入中繼器后,添加的各種元件相當(dāng)于中繼器本身的模板,后面會(huì)按這個(gè)模板進(jìn)行渲染;
2)模板渲染多少次是由樣式中數(shù)據(jù)表的行數(shù)決定的,比如默認(rèn)只有三行數(shù)據(jù),就只生成了三個(gè)矩形框;
3)樣式表中的每一行數(shù)據(jù)就是每次渲染時(shí)可以傳入模板中的數(shù)據(jù),數(shù)據(jù)傳入需要通過中繼器的“每項(xiàng)加載時(shí)”這個(gè)事件進(jìn)行觸發(fā)設(shè)置,比如比如默認(rèn)的是把Column0這列的數(shù)據(jù)傳給了矩形框。通過增加列,可以增加每次渲染時(shí)可以使用的數(shù)據(jù),列名可以自定義(英文字符)。
最后,數(shù)據(jù)表中的數(shù)據(jù)除了字符串外,通過右鍵還可以引入圖片或則頁面,這個(gè)功能非常強(qiáng)大,下面我們將要用到。
有了上面的基礎(chǔ),我們就可以開始制作了。首先我們要確定一下我們的模板組成,對(duì)于不帶圖表的,應(yīng)該要包含一下元件:
1)一個(gè)矩形框,用于規(guī)定模板的邊界大小,同時(shí)用于裝載選項(xiàng)的名字,邊框不顯示,元件命名為”選項(xiàng)名“,注意設(shè)置文字的左邊距;
2)一個(gè)swich切換開關(guān);
3)一個(gè)標(biāo)簽,用于存放右側(cè)的提示文字,命名為”提示文字“,注意選擇右對(duì)齊;
4)一個(gè)“>”符號(hào);
5)一根直線,放于底邊,作為每行的分隔線,命名為”分隔線“。
如下圖所示,把這幾個(gè)元素組合好。
在數(shù)據(jù)表中輸入下面的內(nèi)容,一共四行數(shù)據(jù),表示我們要生成四個(gè)選項(xiàng)。
name表示選項(xiàng)名;
switch為標(biāo)志位,如果需要使用開關(guān)按鈕就填入true,否則不填,為true時(shí)后面都不用填;
option是選項(xiàng)右側(cè)的文字,如果不需要?jiǎng)t不填;
dayufu為標(biāo)志位,需要顯示大于符號(hào)時(shí)填true,與switch不能同時(shí)設(shè)置;
pageUrl用于引用頁面,對(duì)于設(shè)置了大于符號(hào)的項(xiàng),一般都要跳轉(zhuǎn)頁面,直接引用該頁面即可。
數(shù)據(jù)和模板都設(shè)置好了,下面要控制每一項(xiàng)渲染時(shí)的數(shù)據(jù)傳入,首先先設(shè)置文字類的數(shù)據(jù),主要有兩個(gè):
1)把模板中的選項(xiàng)名設(shè)置為Item.name;
2)把提示文字設(shè)置為Item.option。
通過fx中插入變量,Item表示中繼器本身。
這樣設(shè)置以后,顯示如下:
接下來就是控制顯示switch開關(guān)還是顯示”>“符號(hào),這個(gè)可以為模板添加載入事件,在載入時(shí)判斷改行的數(shù)據(jù)switch是否為true,不為true時(shí)將其隱藏,否則將”提示文字“和”>”符號(hào)隱藏:
最后為模板添加一個(gè)單擊事件,當(dāng)pageUrl不為空時(shí),執(zhí)行打開鏈接的操作。
最后,最后一項(xiàng)一般是沒有分隔線的,這個(gè)可以用到中繼器中的一個(gè)變量isLast,就是當(dāng)前項(xiàng)是不是中繼器中的最后一項(xiàng),是的話,這個(gè)值是true。因此我們可以單獨(dú)為下劃線加入一個(gè)載入時(shí)的事件(放在模板組合上也可以),這樣最后一項(xiàng)的分隔線就不顯示了。
帶圖標(biāo)的
下面在以上的基礎(chǔ)上再實(shí)現(xiàn)一個(gè)帶圖標(biāo)的,有了以上基礎(chǔ),其實(shí)就比較簡(jiǎn)單了,就是在模板里面添加一個(gè)圖片元件。
在數(shù)據(jù)表中增加一列pic,右鍵從本地引入圖標(biāo)(推薦從阿里巴巴矢量圖標(biāo)庫下載png圖片)
然后在“每項(xiàng)加載時(shí)”增加一個(gè)設(shè)置圖片的元件動(dòng)作即可。由于有些png圖片的空白邊距過大,可能導(dǎo)致顯示的圖標(biāo)大小不一,所以可以先把圖標(biāo)自己編輯一下。
最后,中繼器自身還有一些變量如
index: 當(dāng)前行的序號(hào);
isFirst: 是不是第一行;
isEven: 是否是偶數(shù)行;
isOdd: 是否是奇數(shù)行;
isMarked: 是否是標(biāo)記行
等等,可以用于很多判斷和篩選。
承擔(dān)因您的行為而導(dǎo)致的法律責(zé)任,
本站有權(quán)保留或刪除有爭(zhēng)議評(píng)論。
參與本評(píng)論即表明您已經(jīng)閱讀并接受
上述條款。