xml地图|网站地图|网站标签 [设为首页] [加入收藏]
来自 科技中心 2019-05-01 22:49 的文章
当前位置: 7276.com > 科技中心 > 正文

中继器使用场景(四):新闻类APP频道自主增减

第二步:我的频道中继器mychannel制作和部分交互

03 最后的总结

到此为止,模拟百度搜索提示的交互效果已经完成了,预览你的原型,欣赏你辛苦半天的作品吧。本案例中的重点在于中继器的综合运用,中继器是Axure7.0版本之后新增加的功能,中继器可以看做成一个本地的小型数据库。熟练应用以后,还可以实现电商列表的筛选,管理后台的条件查询或是在线随机抽奖等效果。

本案例的源文件链接:https://pan.baidu.com/s/1c2rXauc 密码:h3ta


解释:

c 搜索按钮

首先需要想清楚,点击搜索按钮后我们希望达到的效果是怎样的。如果输入的搜索词不在中继器数据集里面,这时候我们需要在中继器数据集中添加这一条数据;再次点击按钮,首先移除之前的全部筛选, 添加新的筛选,这里的筛选规则为精确索引。梳理清楚逻辑规则后,下面我们来看下如何设置交互事件。

为搜索按钮设置单击事件,添加第一个用例,在编辑条件中编辑函数,首先将中继器设置为局部变量LAVR1,然后插入函数[[LVAR1.itemCount]](筛选结果的数量),在编辑条件中设置值等于0,添加动作数据集添加行,在添加行到中继器时,先将文本框定义为局部变量LVAR1,然后在将这个局部变量添加到行。

添加第二个用例case2,动作设置中首先移除全部筛选,然后在添加新筛选中设置筛选条件为[[TargetItem.Column0==LVAR1]]。LVAR1为文本框定义的变量,TargetItem.Column0表达的意思为中继器数据集Column0这一列数据,这里的数据包含之前筛选的结果。

搜索按钮设置单击事件

筛选结果的数量并不等于数据集项的数量,我们可以做个实验,添加两个按钮,一个显示筛选结果的数量,一个显示数据集项的数量。在中继器项的加载事件中添加两个动作,设置两个按钮的文本值分别为函数[[Item.Repeater.itemCount]]和[[Item.Repeater.dataCount]]。(设置的截图可参照上文 加载中继器的项

具体制作过程


7276.com 1

本案例的讲解适用于具有一定的Axure使用基础的人员,关于工具的操作步骤不做详细讲解。本文讲述的重点在于逻辑的梳理以及一些启发性的思路与方法,希望能够帮助大家做出更酷炫的交互效果。

鼠标单击时case1 if 文字于 This == “编辑”,即如果编辑按钮的文字为“编辑”时。

01 准备元件

本案例中需要用到的元件有文本框、矩形按钮和中继器。文本框用于输入搜索词,这里的类型需要设置为查找;矩形按钮可以直接从元件库中拖拽至搜索框右侧,并将按钮中的文字修改为“搜索”;中继器用来显示提示词列表,即根据搜索内容索引出来的列表,这里需要注意将中继器转换为动态面板,因为动态面板可以根据内容自动扩展尺寸,默认隐藏动态面板

元件准备部分重点讲解中继器在本案例中的应用,首先为中继器数据集column0这一列预设一些内容(iphone、iphone7、iphone8、iphone8plus、iphonex、iphonex价格、iphonex配置、iphonex换屏、二手iphonex、维修iphone),共有10项数据内容;然后在为中继器的项设置一个鼠标悬停的交互样式,填充色设置为灰色;最后在将中继器项的边框颜色去掉。至此,中继器的显示效果完成了,看上去与百度的效果基本一致。

每项加载时:case1 设置上文提到的圆角灰色矩形channel name绑定数据集item.channel数据。

02 交互设置

中继器元件布局及数据集制作:数据集一共28行,数据样式为水平排列,每排4列。

a 中继器

这里主要有两个交互事件,第一个为中继器设置每项加载时事件(注意这里的交互设置的对象是中继器不是项),目的是为中继器的项加载内容,在文本设置中将中继器项的值设置为函数[[Item.Column0]];第二个为中继器的项设置单击事件,在文本设置中将搜索框的值设置为项的值,即函数[[this.text]],并隐藏中继器动态面板。

加载中继器的项

将项的值传递给文本搜索框

———————————到这步,中继器自身的构建基本完毕——————————

百度搜索

7276.com 2

 附:中继器函数说明

Repeater 用途:中继器的对象。Item.Repeater即为Item所在的中继器对象。

visibleItemCount 用途:中继器项目列表中可见项的数量。比如:项目列表共有15项,分页显示为每页6项。当项目列表在第1、2页时,可见项数量为6;当项目列表在第3页时,可见项数量为3。

itemCount 用途:获取中继器项目列表的总数量,或者叫加载项数量。默认情况下项目列表的总数量会与中继器数据集中的数据行数量一致,但是,如果进行了筛选,项目列表的总数量则是筛选后的数量,这个数量不受分页影响。

dataCount 用途:获取中继器数据集中数据行的总数量。

pageCount 用途:获取中继器分页的总数量,即能够获取分页后共有多少页。

pageIndex 用途:获取中继器项目列表当前显示内容的页码。

Item 用途:获取数据集一行数据的集合,即数据行的对象。

TargetItem 用途:目标数据行的对象。

Item.列名 用途:获取数据行中指定列的值。

index 用途:获取数据行的索引编号,编号起始为1,由上至下每行递增1。

isFirst 用途:判断数据行是否为第1行;如果是第1行,返回值为“True”,否则为“False”。

isLast 用途:判断数据行是否为最末行;如果是最末行,返回值为“True”,否则为“False”。

isEven 用途:判断数据行是否为偶数行;如果是偶数行,返回值为“True”,否则为“False”。

isOdd 用途:判断数据行是否为奇数行;如果是奇数行,返回值为“True”,否则为“False”。

isMarked 用途:判断数据行是否为被标记;如果被标记,返回值为“True”,否则为“False”。

isVisible 用途:判断数据行是否为可见行;如果是可见行,返回值为“True”,否则为“False”。

今天我们以腾讯新闻为例,讲一下如何做出app内频道自主增减的效果。

当我们使用搜索引擎输入关键词的时候,搜索引擎会根据搜索词模糊匹配推荐一些相关的内容在搜索框的下方显示,这里也包含了我们的搜索记录。点击搜索按钮,搜索引擎就会执行搜索,利用爬虫抓取的网页,按照一定的算法返回搜索结果列表。 那么这样的原型交互效果,是否可以通过Axure完成制作了?这就是今天为大家讲解的交互案例,借助中继器实现百度搜索提示的效果。

7276.com 3

b 文本框

为文本框添加一个文本改变事件,当文本框的内容改变时,我们希望达到这样的效果:显示中继器动态面板,移除之前的筛选结果,重新按照新的搜索词进行索引筛选。这里需要说明的是添加新的筛选时,需要设定一个条件,即当中继器数据集中包含搜索的内容时,执行筛选并显示出来,需要插入这样一个函数[[TargetItem.Column0.indexOf(LVAR1)>-1]]执行新的筛选。文本改变事件还需要添加另一个用例case2,用例中添加一个条件即如果文本框的内容为空,则执行的动作为隐藏中继器动态面板,记得将case2切换为if,case2通常默认为else if。

文本框设置文本改变事件

(4)让文本框yidong1的值来决定两个中继器在位置上的彼此影响。

7276.com 4

7276.com 5

每项加载时case2:if “[[Item.index]]” == “1”指定中继器第一行数据,本例中即指定“要闻”频道。下图中红圈部分,设定文字为富文本,在富文本对话框中,将函数选中,选择蓝色即实现“要闻”频道蓝字凸显。

7276.com 6

————————————到这步,编辑按钮的交互完毕———————————

case1中的后面的两个交互,后面会讲到,这里先不提。

责任编辑:

7276.com 7

case1中的后面的一个交互,后面会讲到,这里先不提。

7276.com 8

7276.com 9

(5)我们再添加一个全局变量jxdatacount,并且在精选频道中继器jxchannel中添加交互:在jxchannnel每项数据加载时,全局变jxdatacount的值为[[Item.Repeater.dataCount]]即中继器数据总数。

本文重点讲解中继器的应用场景,故上述gif图中的,页面跳转交互,比较简单,就不赘述了,下面主要讲解频道增减页的制作。

—————————到这步,两个中继器之间的位移交互完毕—————————

载入时:7276.com,添加排序,按number列的数值升序排列;

(1)将精选频道,和页面中部的图片组合

7276.com 10

接下来,当精选频道中的各个频道标签被点击后,在mychannel中继器中增加相应条目,而在精选频道jxchannel中继器中,要减少相应条目,需更新number2数值,且做升序排列。

解释:鼠标单击圆角灰色矩形jx时,Case1if 文字于 bianji == “编辑”,如果编辑按钮的文字形态为编辑时,点击精品频道中继器jxchannel中的频道条目,就在我的频道mychannel中就添加相应的条目。

同理因为mychannel中的数据为4个一排,所以当点击精选频道的频道标签时,mychannel的数据增加到为“4的倍数多1时”,中继器尺寸就会变大。所以条件设置为:if “[[(LVAR1-1)%4]]” == “0”,LVAR1为yidong1文本框文字,即当mychannel数据总量只要减1就能被4整除时,移动下方的原件下移55个y坐标。

因为mychannel中的数据为4个一排,所以当点击关闭按钮,数据减少到为4的倍数时,中继器尺寸就会变小,所以条件设置为:if “[[LVAR1%4]]” == “0”,LVAR1为yidong1文本框文字。即当mychannel数据总量能被4整除时,移动下方的原件上移55个y坐标。

第三步:jx频道中继器jxchannel制作和部分交互

7276.com 11

7276.com 12

添加number列为[[mychanneldatacount 1]]即新增的数据,number为现有数据 1,按number升序排序时,新增条目排在最后。

添加close列值为0,即不显示左上角的关闭按钮“×”。

交互:

然后在jxchannel中添加行,并将其排在首位。

交互:

7276.com 13

每项加载时:case1设置上文提到的圆角灰色矩形jx绑定数据集item.channel2数据。

(4)接下来,按同样的方法,设置当鼠标单击圆角灰色矩形jx时,Case2 if 文字于 bianji == “完成”时的交互,交互动作和上述一样,唯一不同的在于当编辑按钮文字为“完成”时,点击jx上传到mychannnel中的新条目的左上角关闭按钮“x”都显示。

更新jxchannel中继器相应数据,更新条件为[[TargetItem.number2>Item.number2]]即排在该条目后面的数据行。

(2)接下来我们先添加一个全局变量mychanneldatacount,并且在我的频道中继器mychannel中添加交互:在mychannel每项数据加载时,全局变mychanneldatacount的值为[[Item.Repeater.dataCount]]即中继器数据总数。

7276.com 14

7276.com 15

7276.com 16

同时,我的频道中继器mychannel的频道数据中,除了第一行“要闻”,其他频道条目的左上角,都会出现关闭按钮“×”。

第四步:两个中继器之间的数据传递交互

7276.com 17

7276.com 18

具体效果看GIF图:

7276.com 19

本文由7276.com发布于科技中心,转载请注明出处:中继器使用场景(四):新闻类APP频道自主增减

关键词: