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

lsyjohn 普通用户 2020-2-22 3852

中继器是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金币
最新回复 (195)
  • Seali 普通用户 4天前
    0 引用 196
    666
  • guoquanjiang 普通用户 5天前
    0 引用 195
    好内容,感谢
  • 木木子555 普通用户 18天前
    0 引用 194
    感谢
  • 黄XX 普通用户 19天前
    0 引用 193
    感谢分享
  • elison88 普通用户 19天前
    0 引用 192
    谢谢分享
  • 菲菲123 普通用户 22天前
    0 引用 191
    谢谢分享
  • 初七和芋泥 普通用户 24天前
    0 引用 190
    感谢分享
  • sunpoo 普通用户 24天前
    0 引用 189
    666
  • qzl123 普通用户 26天前
    0 引用 188
    感谢分享
  • zjsmcjy1997 普通用户 1月前
    0 引用 187
    感谢分享
  • poisoncouch 普通用户 5月前
    0 引用 186
    3q
  • 16534087769 普通用户 5月前
    0 引用 185
    谢谢
  • captainya 普通用户 5月前
    0 引用 184
    kk
  • huanjia27 普通用户 5月前
    0 引用 183
    参考不一致
  • mcgreed 普通用户 5月前
    0 引用 182
    谢谢分享
  • 刘冬冬 普通用户 5月前
    0 引用 181
    谢谢分享
  • 鲤--- 普通用户 5月前
    0 引用 180
    学习一下
  • fengyun4071 普通用户 5月前
    0 引用 179
    谢谢分享!!!!
  • lxy1120 普通用户 5月前
    0 引用 178
    感謝
  • J、_1604211553 普通用户 5月前
    0 引用 177
    感谢分享
  • hehaijun 普通用户 5月前
    0 引用 176
    学习
  • AxuX 普通用户 5月前
    0 引用 175
    感谢分享
  • Aiaiaishunv 普通用户 5月前
    0 引用 174
    回帖
  • 流音箭芒 普通用户 5月前
    0 引用 173
    流音箭芒 教程看的不太明白,下载原型学习一下
    终于弄懂了,得到了提升,谢谢
  • 流音箭芒 普通用户 5月前
    0 引用 172
    教程看的不太明白,下载原型学习一下
  • gousheng 普通用户 5月前
    0 引用 171
    感谢分享
  • 开心100 普通用户 5月前
    0 引用 170
    感谢分享 
  • 杨J_1602665154 普通用户 5月前
    0 引用 169
    楼主思路清晰,非常适合移动端的表单设计
  • a907028382 普通用户 5月前
    0 引用 168
    谢谢分享
  • meingst 普通用户 6月前
    0 引用 167
    感谢分享
  • weiwuhu 普通用户 6月前
    0 引用 166
    前来学习,感
  • wulongshan 普通用户 6月前
    0 引用 165
    有点意思,试试看
  • steven_love 普通用户 6月前
    0 引用 164
    感谢感谢
  • 南船五 普通用户 6月前
    0 引用 163
    感谢分享
  • alenfly 普通用户 6月前
    0 引用 162
    感谢分享~
  • 1538024849 普通用户 6月前
    0 引用 161
    学习下
  • 芋圆 普通用户 6月前
    0 引用 160
    谢谢
  • junleis123 普通用户 6月前
    0 引用 159
  • Hely 普通用户 6月前
    0 引用 158
    感谢
  • 凉卜 普通用户 6月前
    0 引用 157
    感谢分享
  • 扶朕起来 普通用户 7月前
    0 引用 156
    11
  • f-x 普通用户 7月前
    0 引用 155
    感谢分享
  • 老戴 普通用户 7月前
    0 引用 154
    感谢分享
  • 大丹 普通用户 7月前
    0 引用 153
    感谢
  • 刘蕊⑅◡̈*. 普通用户 7月前
    0 引用 152
    多谢分享
  • 步履不停 普通用户 7月前
    0 引用 151
    感谢分享
  • 加点盐 普通用户 7月前
    0 引用 150
    感谢
  • chawmey 普通用户 7月前
    0 引用 149
    感谢分享 
  • congzi530 普通用户 7月前
    0 引用 148
    前来观摩学习
  • 子狍傻读来过反 普通用户 7月前
    0 引用 147

    学习一下

  • 风吹过的沙 普通用户 7月前
    0 引用 146
    学习一下
  • 华_1592287938 普通用户 8月前
    0 引用 145
    多谢分销!!
  • 华_1592287938 普通用户 8月前
    0 引用 144
    duoxie分享
  • garlic198987 普通用户 8月前
    0 引用 143
    感谢分享!
  • WalterLee 普通用户 8月前
    0 引用 142
    感谢~~~
  • sqsq 普通用户 8月前
    0 引用 141
    感谢分享
  • 猜猜我是谁123 普通用户 8月前
    0 引用 140
    感谢分享
  • jijiasoft 普通用户 8月前
    0 引用 139
    感谢分享
  • WWQ_1595173519 普通用户 8月前
    0 引用 138
    感谢分享
  • 一棵树_1597023016 普通用户 8月前
    0 引用 137
    感谢分享
  • star_1596728763 普通用户 8月前
    0 引用 136
    感谢分享
  • X-chun 普通用户 8月前
    0 引用 135
    感谢分享
  • JunBC 普通用户 8月前
    0 引用 134
    感谢分享
  • 632508968 普通用户 8月前
    0 引用 133
    感谢分享
  • syy_1596636899 普通用户 8月前
    0 引用 132
    很哈皮
  • 彡健华 普通用户 8月前
    0 引用 131
    感谢
  • aimly 普通用户 8月前
    0 引用 130
    学习
  • mydoka 普通用户 8月前
    0 引用 129
    感谢分享
  • Mr鲷 普通用户 8月前
    0 引用 128
    谢谢分享
  • SOLA_1596338998 普通用户 8月前
    0 引用 127
    谢谢分享
  • 2352 普通用户 8月前
    0 引用 126
    哈哈哈
  • Jmx小不点 普通用户 8月前
    0 引用 125
    学习
  • xoyoren_1220 普通用户 8月前
    0 引用 124
    学习中
  • 夏亦云沐 普通用户 8月前
    0 引用 123
    学习学习
  • 陈晓聪 普通用户 8月前
    0 引用 122
    感谢分享!!
  • wf5052268 普通用户 8月前
    0 引用 121
    看看
  • laojing 普通用户 8月前
    0 引用 120
    谢谢
  • 波_1594623172 普通用户 8月前
    0 引用 119
    辛苦
  • 小苹果April 普通用户 8月前
    0 引用 118
    学习学习!感谢分享!
  • juan001 普通用户 9月前
    0 引用 117
    感谢分享。楼主辛苦
  • popozhong 普通用户 9月前
    0 引用 116
    感谢分享。楼主辛苦了。
  • 李健 普通用户 9月前
    0 引用 115
    感谢老师 解决了我自学Axure的问题
  • hooler 普通用户 9月前
    0 引用 114
    感谢大佬分享
  • shellyzhao 普通用户 9月前
    0 引用 113
    多谢多谢~~~
  • 黄小浩 普通用户 9月前
    0 引用 112
    3q
  • 林户 普通用户 9月前
    0 引用 111
    3q
  • 一跑就喘的猿 普通用户 9月前
    0 引用 110

    感谢大佬

  • 十七_1593677976 普通用户 9月前
    0 引用 109
    学习继续
  • 机智的十二酱 普通用户 9月前
    0 引用 108

    需要好好学习一下

  • 毛气球 普通用户 9月前
    0 引用 107
    学习
  • 老K 普通用户 9月前
    0 引用 106
    3Q
  • Benjamin zhou 普通用户 9月前
    0 引用 105
    奥利给
  • echo3721 普通用户 9月前
    0 引用 104
    下载下来,好好学下
  • 小麦旋风 普通用户 9月前
    0 引用 103
    学习一下
  • qq23456 普通用户 9月前
    0 引用 102
    111111111111
  • majiajiu 普通用户 9月前
    0 引用 101
    学习学习
  • 啊chandler 普通用户 9月前
    0 引用 100
    很实用,值得学习学习
  • 夜鸟 普通用户 9月前
    0 引用 99
    学习 学习
  • 鸭梨大小萌 普通用户 9月前
    0 引用 98
    感谢分享
  • caicaiai 普通用户 9月前
    0 引用 97
    好人一生平安
返回
axure商城