利用中继器快速实现APP中设置页面的各种列表选项 获赏110金币 基础教程

lsyjohn 普通用户 3月前 1051

中继器是Axure中的一个高级元件,可以当做Axure中的小型数据库使用,用于实现一些增删查改的效果,同时可用于一些具有相同元件组合的组件的快速生成,比如APP中的设置,如下图所示。下面我们介绍一下怎么用中继器实现。

https://www.axureshop.com/shop/24308中有一些综合实战案例,欢迎大家下载交流学习。

中继器基础知识

我们先介绍一下中继器的基础知识,拖入一个中继器,可以看到显示的是纵排的三个矩形框,框中内容分为为1,2,3,交互中有一个事件每项加载时,元件动作是设置矩形框的文本为Item.Column0,点击样式,可以看到有一个数据表格,默认只有一列Column0,列中数据为1,2,3。双击中继器,可以看到其中只有一个矩形框。


从中不难看出以下几点:

1)双击进入中继器后,添加的各种元件相当于中继器本身的模板,后面会按这个模板进行渲染;

2)模板渲染多少次是由样式中数据表的行数决定的,比如默认只有三行数据,就只生成了三个矩形框;

3)样式表中的每一行数据就是每次渲染时可以传入模板中的数据,数据传入需要通过中继器的“每项加载时”这个事件进行触发设置,比如比如默认的是把Column0这列的数据传给了矩形框。通过增加列,可以增加每次渲染时可以使用的数据,列名可以自定义(英文字符)。


最后,数据表中的数据除了字符串外,通过右键还可以引入图片或则页面,这个功能非常强大,下面我们将要用到。

有了上面的基础,我们就可以开始制作了。首先我们要确定一下我们的模板组成,对于不带图表的,应该要包含一下元件:

1)一个矩形框,用于规定模板的边界大小,同时用于装载选项的名字,边框不显示,元件命名为”选项名“,注意设置文字的左边距;

2)一个swich切换开关;

3)一个标签,用于存放右侧的提示文字,命名为”提示文字“,注意选择右对齐;

4)一个“>"符号;

5)一根直线,放于底边,作为每行的分隔线,命名为”分隔线“。

如下图所示,把这几个元素组合好。


在数据表中输入下面的内容,一共四行数据,表示我们要生成四个选项。

name表示选项名;

switch为标志位,如果需要使用开关按钮就填入true,否则不填,为true时后面都不用填;

option是选项右侧的文字,如果不需要则不填;

dayufu为标志位,需要显示大于符号时填true,与switch不能同时设置;

pageUrl用于引用页面,对于设置了大于符号的项,一般都要跳转页面,直接引用该页面即可。


数据和模板都设置好了,下面要控制每一项渲染时的数据传入,首先先设置文字类的数据,主要有两个:

1)把模板中的选项名设置为Item.name;

2)把提示文字设置为Item.option。

通过fx中插入变量,Item表示中继器本身。

这样设置以后,显示如下:

接下来就是控制显示switch开关还是显示”>“符号,这个可以为模板添加载入事件,在载入时判断改行的数据switch是否为true,不为true时将其隐藏,否则将”提示文字“和”>"符号隐藏:

最后为模板添加一个单击事件,当pageUrl不为空时,执行打开链接的操作。


最后,最后一项一般是没有分隔线的,这个可以用到中继器中的一个变量isLast,就是当前项是不是中继器中的最后一项,是的话,这个值是true。因此我们可以单独为下划线加入一个载入时的事件(放在模板组合上也可以),这样最后一项的分隔线就不显示了。


带图标的

下面在以上的基础上再实现一个带图标的,有了以上基础,其实就比较简单了,就是在模板里面添加一个图片元件。

在数据表中增加一列pic,右键从本地引入图标(推荐从阿里巴巴矢量图标库下载png图片)

然后在“每项加载时”增加一个设置图片的元件动作即可。由于有些png图片的空白边距过大,可能导致显示的图标大小不一,所以可以先把图标自己编辑一下。


最后,中继器自身还有一些变量如

index: 当前行的序号;

isFirst: 是不是第一行;

isEven: 是否是偶数行;

isOdd: 是否是奇数行;

isMarked: 是否是标记行

等等,可以用于很多判断和筛选。

axure商城
上传的附件:
快速回复
打赏排行 用户名 打赏金额
第1名 黯黄老师 100金币
第2名 沈十三 10金币
最新回复 (66)
  • Johnson76 普通用户 4小时前
    0 引用 67
    感谢分享
  • 迷迭香 普通用户 4小时前
    0 引用 66
    前来学习,感谢!
  • zhp 普通用户 4天前
    0 引用 65
    感谢感谢
  • cldzgr 普通用户 4天前
    0 引用 64
    1
  • Aa 谢春晖 普通用户 6天前
    0 引用 63
    111
  • huayuhang 普通用户 10天前
    0 引用 62
    感谢分享
  • 十二摸 普通用户 11天前
    0 引用 61
    谢谢
  • dw_cd 普通用户 12天前
    0 引用 60
    前来学习
  • wowo 普通用户 15天前
    0 引用 59
    感谢
  • 刘艳儿_1585141683 普通用户 15天前
    0 引用 58
    666
  • 张一 普通用户 15天前
    0 引用 57
    感谢分享
  • _寺司 普通用户 15天前
    0 引用 56
    感谢分享
  • meihao 普通用户 15天前
    0 引用 55

    前来学习,谢谢

  • 刀刀狗 普通用户 16天前
    0 引用 54
    感谢
  • 易_1583464360 普通用户 16天前
    0 引用 53
    6666
  • 感觉_1586941719 普通用户 17天前
    0 引用 52
    感谢分享
  • Jacky·Chen 普通用户 18天前
    0 引用 51
    感谢分享
  • 1948845904 普通用户 18天前
    0 引用 50
    前来学习
  • 良_1589005890 普通用户 20天前
    0 引用 49
    感谢分享
  • 叶媛贤_1585013835 普通用户 20天前
    0 引用 48
    感谢分享
  • hitlx 普通用户 21天前
    0 引用 47
    感谢分享!
  • 文子_1584073517 普通用户 21天前
    0 引用 46
    感谢分享
  • myn911231 普通用户 22天前
    0 引用 45
    bangbangbang
  • 养乐多_1586240074 普通用户 23天前
    0 引用 44
    1000
  • 王伟_1588751934 普通用户 23天前
    0 引用 43
    感谢分享
  • forbi 普通用户 29天前
    0 引用 42
    thanks
  • xa007 普通用户 29天前
    0 引用 41
    感谢
  • 王平_1588152620 普通用户 1月前
    0 引用 40
    学习一下,感谢分享,感谢楼主
  • babybear619 普通用户 1月前
    0 引用 39
    感谢分享
  • 泡泡2代 普通用户 1月前
    0 引用 38
    感谢分享
  • 古古奇 普通用户 1月前
    0 引用 37
    学习了
  • vicwxh 普通用户 1月前
    0 引用 36
    前来学习,感谢分享
  • 孙悟空_1587692538 普通用户 1月前
    0 引用 35
    6666666666666
  • C先生 普通用户 1月前
    0 引用 34
    看看效果
  • 黄龙_1587535027 普通用户 1月前
    0 引用 33
    看看效果
  • leewind001 普通用户 1月前
    0 引用 32
    感谢大佬分享!!
  • 汪洋 普通用户 1月前
    0 引用 31
    谢谢
  • amine 普通用户 1月前
    0 引用 30
    前来学习
  • wenzikwok 普通用户 1月前
    0 引用 29
    前来学习
  • 宋建华 普通用户 1月前
    0 引用 28
    学习
  • Ly_1583203359 普通用户 1月前
    0 引用 27
    感谢分享
  • 毛大爷 普通用户 1月前
    0 引用 26
    感谢分享,学习学习!
  • 。_1587429836 普通用户 1月前
    0 引用 25
    谢谢分享
  • 田七 คิดถึง 普通用户 1月前
    0 引用 24
    赶紧下下来看看
  • chusan 普通用户 1月前
    0 引用 23
    前来学习,谢谢大佬
  •  _1587359244 普通用户 1月前
    0 引用 22
    感谢分享!!
  • SteveD 普通用户 1月前
    0 引用 21
    厉害了啊,太谢谢了
  • 竹竿哥i_1587349486 普通用户 1月前
    0 引用 20
    前来学习
  • chen1212 普通用户 1月前
    0 引用 19
  • 黄果果_1583295643 普通用户 1月前
    0 引用 18
    6666666666666666666666666666666666666
  • Luffy_1585723041 普通用户 1月前
    0 引用 17
    钢协打捞了的,作为【in我的卢卡斯的合法的
  • Ethereal 普通用户 1月前
    0 引用 16
    感谢分享
  • 源大胆 普通用户 1月前
    0 引用 15
    感谢大佬分享!
  • 薛定谔的猫_1587028785 普通用户 1月前
    0 引用 14

    很好,感谢分销

  • houwan123 普通用户 1月前
    0 引用 13
    1
  • Mr.Nobody 普通用户 1月前
    0 引用 12
    3Q
  • HughPro 普通用户 1月前
    0 引用 11
    很好啊,学习学习
  • 单单 普通用户 2月前
    0 引用 10
    谢谢
  • eniac02 普通用户 2月前
    0 引用 9
    感谢
  • 琳星点点 普通用户 2月前
    0 引用 8
    666
  • 程维维 普通用户 2月前
    0 引用 7
    感谢分享
  • 真以航(熊岳南京) 普通用户 2月前
    0 引用 6
    感谢分享
  • 丷月 普通用户 2月前
    0 引用 5
    1
  • nxtangkun 普通用户 3月前
    0 引用 4
    前来学习,谢谢
  • nxtangkun 普通用户 3月前
    0 引用 3
    前来学习
  • 沈十三 管理员 3月前
    0 引用 2
    感谢分享,已获得10金币奖励!
返回
axure商城