本教程主要是運(yùn)用【中繼器】制造列表排版、單選框選中及數(shù)據(jù)項(xiàng)背景交替的展示效果。如下：

一、頁面布局

從左側(cè)元件庫拉入四個(gè)【矩形】作為列表表頭，隨意命名。再拉入一個(gè)【中繼器】作為列表展示，復(fù)制表頭的四個(gè)【矩形】，雙擊【中繼器】進(jìn)入編輯頁面，粘貼矩形，更改背景色，分別命名為勾選框、a、b、c。

其次，再拉入一個(gè)單選框，排版如下：

三、添加交互

1、想要更改列表中的展示數(shù)據(jù)，需要先給中繼器配置數(shù)據(jù)列表，類似數(shù)據(jù)庫。選中中繼器，可以看到屬性下面有列表框，如下：

點(diǎn)擊【添加列】添加三列數(shù)據(jù)，填入相應(yīng)的字段，如果想增加行數(shù)，可以點(diǎn)擊【添加行】，如下：

2、接下來需要給中繼器中的列表框配置數(shù)據(jù)鏈接，讓中繼器中的列表a、b、c對(duì)應(yīng)數(shù)據(jù)庫中的列表itema、b、c。

雙擊【屬性】中的【每項(xiàng)加載時(shí)】交互事件，進(jìn)入設(shè)置頁面，如下：

勾選矩形a、b、c，并設(shè)置文本值分別為：[[Item.a]]、[[Item.b]]和[[Item.c]]，如下：

3、預(yù)覽效果如下：

四、交互細(xì)節(jié)調(diào)整

1、點(diǎn)擊預(yù)覽中的單選框，發(fā)現(xiàn)點(diǎn)擊后會(huì)全部選中，無法實(shí)現(xiàn)單選效果，如下：

這時(shí)，我們需要雙擊中繼器進(jìn)入編輯頁面，給單選框【設(shè)置單選按鈕組名稱】，命名為1，如下：

然后，還需要將中繼器中【隔離單選按鈕組效果】和【取消選項(xiàng)組效果】勾選去掉。如下：

預(yù)覽效果如下：

2、如果想實(shí)現(xiàn)列表中的數(shù)據(jù)背景有兩種顏色分層效果，可以在中繼器的【樣式】中的【背景】，勾選【交替】，分別設(shè)置兩種背景填充色。如下：

其次，最重要的是，需要將中繼器中的矩形的背景色填充色去掉，否則無法看到效果，設(shè)置如下：

五、預(yù)覽效果

學(xué)習(xí)更多教程，可關(guān)注本人公眾號(hào)：艾斯的Axure峽谷。

歡迎大家留言評(píng)論，也可以留下你的評(píng)論，期待想看到的交互效果。

示例下載：百度網(wǎng)盤

提取碼: m53j

示例演示：