这不是Axure教程!(七)强大的中继器__1

中继器,从物理层面是一个实体工具,可以作为局域网所有节点的中心,放大信号,增强远距离的通信,把不同传输介质的网络连在一起。

而在Axure软件中,中继器英文是“Repeater”,直译为“重复器”,但汉化者并没有使用,而是采用中继器这个更专业的词汇。

这样翻译其实很有道理,中继器也相当于一种媒介,把外界信息收集起来,再实现包括基础数据、操作、操作后的效果。

例如我们常见的增删改功能、排序筛选等,其本质就是对数据的重复操作。增加数据就是重复再显示一次,删除数据就是把重复效果去掉,这样一想,我们就更容易理解中继器到底在做什么了。

本文的思路仍然是从基础理论说起,再讲常用效果的实现思路

一、原理与属性与样式

既然中继器最本质的特点是repeat,那么我们先搞清楚它是如何重复的?重复的规律是什么?

拖入一个中继器,重点看属性和样式,如下图红圈

属性和样式


1.1 中继器属性

在前文中已经比对过矩形、动态面板、热区的属性,每类元件都有其特有的交互用例

中继器有【每项加载时】【项目调整尺寸时】

● 【每项加载时】

交互事件中有一个默认Case1,意指将某个矩形设置为某个数据。而中继器数据区域,第一列列名为Column0,下方值显示为 1/2/3,和中继器显示的1/2/3对应。添加第二列数据后,按照同样的方式设置第二列显示的数据为数据区Column1。

因此不难得知如下规律

1)中继器属性区有N行数据,中继器就重复N次,每一行数据相当于一个项目

2)每行数据,也即每个项目中包含X个元件,X个元件对应了同一行数据中的多列

如上述示例,三行数据则中继器重复了三次,每1行数据包含两列,每一列和项目中的某个元件对应

● 【项目调整尺寸时】

英文原版为 【OnItemResize】,直译为 【当项目尺寸改变时】,意指当每一项目的尺寸发生变化。那么什么情况才算尺寸发生变化呢?

项目中发生【显示隐藏、移动、旋转、设置尺寸】都可认为尺寸改变,而设置文字或设置图片则不算

1.2 中继器样式

● 样式-布局

分为三种:垂直、水平、网格排布。也就是在中继器重复时,每个项目是纵向重复、水平重复、网格重复

以下三个中继器设置了完全相同的数据和每个项目的基础样式,只是布局方式不同

布局

● 样式-背景

背景色,设置了每个项目的背景色,例如设置为绿色,则每次重复时都会自动加上绿色背景

背景

● 样式-分页

分页,原理和我们常见分页功能相似,例如通常每页10条

多页显示:数据总行数,超过了每页显示的数量,则勾选

每页项目数:设置5,则每一页显示5条数据,从第6条开始会显示到第2页

起始页:设置默认开始的页码,设置2,则中继器默认显示第2页的数据

● 样式-间距

也即每个项目之间的间距

如果项目布局是垂直排列,那么设置行间距,如果项目布局是水平排列,那么设置列间距,如果是网格排列,可以设置行和列间距

间距

1.3 中继器数据

能支持的功能有

可直接Ctrl+V粘贴数据

可导入图片

建议这样设置来提高效率

事先把图片放入到同一个文件夹内

事先把基础数据填写到Excel内

事先把项目中元件的名字,和数据区的列名统一

二、初级示例:某网校页面的课程排列

先找一个网校打开某类课程的页面,发现每一门课程都有相同的属性,如下截图

某网校的网课

一门课程的属性分为7个:图片、课程名称、学校、讲师、集数、类型、简介

观察和分析的步骤如下

1、每门课程的属性都有这些,重复!————应该使用中继器

2、纵向垂直排列————中继器的布局方式应该选 【垂直】

3、每一行课程中间有间隔————中继器的间隔应该设置【行间距】,具体值需要测量

4、课程有图片————中继器每行数据的图片需要【提前设置并导入】

5、每门课程的属性有7个且不同————中继器的项目至少有7个元件,数据区需要7列数据,每列列名需要和元件名称对应

按照上面的分析,我们先做三个课程,也即三行数据,具体设置如下

中继器设置要点

设置上图的最佳步骤是

1、拖入一个中继器

2、在基础属性中画好一门课程的所有属性,并把元件名称写为英文

3、在中继器的数据区,粘贴提前写好的课程内容,并把【列名】修改为【元件名】,均为相同英文名

4、右击图片列的单元格,导入图片

5、Case1中,每项加载时事件设置每个元件的值等于中继器的列名,再设置图片显示为图片列名

根据上面的设置,预览效果如下

预览效果

以上。

中继器原理和基本属性就是文中提到的这些了,但其实它远不止如此,不然怎么会让我用强大这个词来形容它呢,下次再总结它常用的案例。


— — — — 系 列 目 录 — — — —

这不是Axure教程!(一)初步认识

这不是Axure教程!(二)素材获取

这不是Axure教程!(三)流程与标注

这不是Axure教程!(四)元件六要素与用例

这不是Axure教程!(五)变量与函数

这不是Axure教程!(六)动态面板之一:属性和动效

这不是Axure教程!(六)动态面板之二:经典实践

这不是Axure教程!(七)强大的中继器__1

— — — — 目  录  完 — — — —

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,911评论 5 460
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 82,014评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 142,129评论 0 320
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,283评论 1 264
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,159评论 4 357
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,161评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,565评论 3 382
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,251评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,531评论 1 292
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,619评论 2 310
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,383评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,255评论 3 313
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,624评论 3 299
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,916评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,199评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,553评论 2 342
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,756评论 2 335

推荐阅读更多精彩内容