本教程主要是运用【中继器】制造列表排版、单选框选中及数据项背景交替的展示效果。如下:
一、页面布局
从左侧元件库拉入四个【矩形】作为列表表头,随意命名。再拉入一个【中继器】作为列表展示,复制表头的四个【矩形】,双击【中继器】进入编辑页面,粘贴矩形,更改背景色,分别命名为勾选框、a、b、c。
其次,再拉入一个单选框,排版如下:
三、添加交互
1、想要更改列表中的展示数据,需要先给中继器配置数据列表,类似数据库。选中中继器,可以看到属性下面有列表框,如下:
点击【添加列】添加三列数据,填入相应的字段,如果想增加行数,可以点击【添加行】,如下:
2、接下来需要给中继器中的列表框配置数据链接,让中继器中的列表a、b、c对应数据库中的列表itema、b、c。
双击【属性】中的【每项加载时】交互事件,进入设置页面,如下:
勾选矩形a、b、c,并设置文本值分别为:[[Item.a]]、[[Item.b]]和[[Item.c]],如下:
3、预览效果如下:
四、交互细节调整
1、点击预览中的单选框,发现点击后会全部选中,无法实现单选效果,如下:
这时,我们需要双击中继器进入编辑页面,给单选框【设置单选按钮组名称】,命名为1,如下:
然后,还需要将中继器中【隔离单选按钮组效果】和【取消选项组效果】勾选去掉。如下:
预览效果如下:
2、如果想实现列表中的数据背景有两种颜色分层效果,可以在中继器的【样式】中的【背景】,勾选【交替】,分别设置两种背景填充色。如下:
其次,最重要的是,需要将中继器中的矩形的背景色填充色去掉,否则无法看到效果,设置如下:
五、预览效果
学习更多教程,可关注本人公众号:艾斯的Axure峡谷。
欢迎大家留言评论,也可以留下你的评论,期待想看到的交互效果。
示例下载:百度网盘
提取码: m53j
示例演示: