快好知 kuaihz

Axure教程:中继器实现评论的增与删

在一些清晰的交互中,往往能够节省很多语言的描述,Axure中的中继器能够很好的完成这一点。对评论列表进行增和删的操作,是如何完成的呢?下面将清晰的展示整体的操作过程。

展示效果:

准备工作

编辑中继器

(1)在元件库中拖动中继器到原型界面上,拖动后会看到如右图所示。

(2)双击拖动后的中继器可以进入到中继器的编辑页面,在编辑页面中添加需要的控件。

3、添加时给每个控件添加上对应的名字,最好用英文或者拼音表示,比较好记,我在这里分别添加为img,name,time,content。

编辑内容

(1)操作完上面的步骤后,点击关闭按钮。会发现三行中元素显示都相同了,为中继器添加内容,点击中继器,在style下会发现如下所示:

(2)我们将右侧的内容加以修改,在右侧我们把第一行修改为了元件的名字,并都添加了相应的内容,第一列img的位置,右键需要导入图片的位置,会有导入图片的按钮,点击即可。

将内容插入中继器

(1)进行了上面的基本操作后,我们需要将右侧的内容,插入到左侧的中继器中,选中中继器添加用例,多图预警。

点击ok中继器中的名字被修改成功,如图所示:

(2)修改时间和评论内容的步骤和上面相同,只需要注意setText ->time=item.time,setText->content=item.content即可。设置图片时与设置文字内容存在一定的差异性,看图:

点击ok,图片修改成功,完成后的最终结果如图:

增加评论

中继器外增加相同的元件,并增加一个发布按钮。

给元件增加名字(其中发布按钮不用加),注意这里的名字不能与上面的相同。

给发布按钮添加事件,点击发布按钮时,中继器增加一行。

点击添加的行,给行里的字段赋值。

给name赋值,先添加局部变量,让局部变量=this.xingming(也就是给name起的名字)。

点击上方的按钮将name,值为LVAR1。

删除评论

删除单个评论

(1)在中继器内增加删除按钮

(2)给删除按钮增加选中和删除行的事件

批量删除

(1)在中继器上增加复选框

(2)批量删除思路:复选框被选中意味着此条评论被选中,点击批量删除的时候,删除所有被选中的评论。

给选中按钮添加事件(上面都是一步一步添加的,在这里省略中间的步骤)。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:中继器  中继器词条  实现  实现词条  教程  教程词条  评论  评论词条  Axure  Axure词条  
原型

 Axure 组件重写系列(三):...

在学习了本文的中继器表格之后,你将会十分完美地解决原生表格组件覆盖不到的功能区。一起来看。表格应该是我们非常熟悉的一种数据格式了,在实际开发中,它也是作为系统的...(展开)

原型

 用原型写需求文档-后台系统篇

作者整理了一套后台系统原型模板,与各位PM分享,希望给大家的工作带来些帮助。后台系统的原型模板早在做APP模板前就已经使用了很长一段时间。后台原型不需要也不适合...(展开)

原型

 Axure RP 9 教程:记录...

本案例制作一个可拖动的条形进度条,同时可以显示当前位置的百分比。一起来看看~实现效果:自由拖动进度条记录当前进度条的百分比顺便记录下你的颜值实现逻辑this.r...(展开)