快好知 kuaihz

Axure教程:中继器的使用之动态模糊搜索

文章讲解了如何用Axure实现动态模糊搜索的两种样式,与大家分享。

本人产品新人一枚,在学习axure中发现中继器的使用之动态模糊搜索的文章都比较散,想着写一篇自己稍微整合的文章,希望对大家能有点用。本次文章分享以下两种动态模糊搜索的样式:

输入关键词,点击搜索,查询出对应的信息列表;

输入关键词,自动查询对应的信息列表。

以下为正文:

01 输入关键词,点击搜索,查询对应信息列表

1.1 中继器内容设置

(1)先拉入一个中继器,双击中继器,并且复制三个矩形出来(复制数量根据具体数据列)

(2)增加矩形后,回到中继器的页面,会发现已经变成了三列。这时点击中继器,在右边属性下,增加对应的列表信息。但此时中继器还不会显示增加的信息,需要在交互下设置对应的变量名后,才会显示。

给对应的列设置对应的变量(先勾选需要设置变量的中继器,然后点击fx,插入变量即可)

(3)此时回到中继器的页面,发现中继器里面的内容已经填充进去并显示出来了。

1.2 输入框和搜索框设置

(1)先拉入一个输入框和搜索框,并且相应命名为search(输入框)和select(搜索框),方便后续使用,具体命名可自由设置

(2)点击搜索框,在属性下找到交互下的“鼠标单击时”,双击该选项后,跳出用例编辑页面,找到中继器,选择“添加筛选”,然后勾选配置动作下的中继器,下一步勾选“移除其他筛选”(不打钩),最后点击fx,进入到设置页面。

(3)点击fx进入编辑值页面,先进性局部变量的设置,按照以下步骤设置(给输入框命名的用处就在这,方便查找),此步骤的意思是把输入框里面输入的内容设置为变量,通过这个变量去与列表里面的内容进行比对。

(4)设置完局部变量后,开始设置函数,即判断变量在列表中是否重合。此处用的函数是indexof(变量),具体写法参照下方讲解。到这一步基本设置已经完成了,接下来来看一下具体的使用效果。

1.3 使用效果(大家可以自己操作下,还是很简单的)

1.4 讲解

函数为:[[(Item.xuhao.indexof(word)+Item.name.indexof(word)+Item.home.indexof(word))>-3]]

变量需要与列表的表头一一对应上,其中(Item.xuhao.indexof(word)、Item.name.indexof(word)、Item.home.indexof(word)代表的是用输入框中获取的值与列表中的内容进行对比,对应的比较返回值大于-1即返回对应的结果,因为我们有3列,所以返回-3就可以了。

02 输入关键词,自动查询对应的信息列表

2.1 说明

这两步的差别是一个输入后,还需要点击搜索才会出现结果,另一个是输入关键词后,自动出现比对的结果。

这个效果的设置方式跟前者是一样的,只是设置的对象由搜索框换成了输入框,并且交互效果换成“文本改变时”。

2.2 输入框设置

(1)点击输入框,在属性下找到交互下的“文本改变时”,双击该选项后,跳出用例编辑页面,找到中继器,选择“添加筛选”,然后勾选配置动作下的中继器,下一步勾选“移除其他筛选”(不打钩),最后点击fx,进入到设置页面。

(2)剩余步骤跟前者是一样的,大家可以自己试着操作一下,这里就不多赘述了,直接看效果吧。

2.3 使用效果(没有用动图,但是效果是可以实现的,可以自己操作下)

03 写在结尾

大家在使用这个效果的时候,需要注意函数不能写错,函数错了,多个字母或者少个符号都会出现问题。

具体步骤还是比较简单的,大家多操作两边就熟悉了。

初次分享,还请大家多多指教。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中继器  中继器词条  模糊  模糊词条  使用  使用词条  教程  教程词条  动态  动态词条  
原型

 Axure RP 9教程:中继器...

本次教程是对Axure中继器的深化学习,之前发布过通过中继器实现模块排序的功能,本次教程是利用中继器实现筛选和新增。一、特别提醒考虑到网上Axure RP 9 ...(展开)

原型

 Axure7.0教程(七)mat...

上一篇教程我们接触了Math函数的使用,我觉得有必要让大家对Math函数进行一个全面的了解,那么在以后的教程中,也不会觉得太过陌生。下面我们通过官方发布的Mat...(展开)

原型

 用Axure8.0制作简单的登录...

在这里写文章,一来是为了记录自己的一个学习过程,二来也是为了让自己能够融入到这个平台的创作氛围里。请大家多多关照。通过写文章,来记录自己的学习内容,深刻自己的理...(展开)