【Axure教程】用中继器做评论元件

简介: 【Axure教程】用中继器做评论元件

hello,今天教大家用中继器做高保真评论元件

【原型预览】

用电脑点击左下方阅读原文或复制打开下面的原型预览地址

https://axhub.im/ax9/8a18c2abc8886ca2/#g=1

【原型下载】

方式2:https://weidian.com/item.html?itemID=3422296165

【原型效果】

1. 查看评论

可以敲回车键提交哦:


640.gif

2. 评论文章

640.gif

3. 回复评论1

b3a7c46f0b7c38065e59db1b0d736041.jpg

4. 回复评论2

2efff00d92216bc4079af436410c369e.jpg

使用说明

该原型填写中继器表格即可直接使用。

no:按1、2、3排下去即可,如果是回复评论,序号和评论序号一致即可

picture:评论者的头像,导入图片即可

name:评论者的名字

huifu:具体是回复哪个人的,如果不填即评论文章

text:评论的内容

date:评论的日期

benren:一般为空,填写之后代表这条是本人回复的,将用本人头像和名字

dcae690edbc025a472ea44ce0593f1c5.png

制作方法

1. 评论中继器制作

材料包括,头像,name,text,时间,回复按钮,回复组合(默认隐藏)。回复组合包括多行文本框,取消回复和发布按钮。

按下图排列:

  • 点击回复按钮时:显示回复组合;
  • 点击取消回复按钮时:隐藏回复组合;
  • 点击发布按钮时:if多行文本框的值≠空,新增行,并且隐藏回复组合。新增行逻辑下面在说。

ed74a048b0e0cc1b2ea9441f98adf547.png

2. 中继器内交互

no:载入时按这个升序排列,当然你可以看需求,也可以按date的降序排列;

picture:每项加载时设置头像图片的值=item.picture;

name:每项加载时,设置名称文本=item.name;

huifu:如果这个值不为空,设置name=target.text+回复+item.huifu;

date:设置时间文本=item.date;

benren:如果该值不为空的时候,显示本人头像置顶,设置名称文本=本人的名字。(本人头像和name可以自己设计)

dcae690edbc025a472ea44ce0593f1c5.png

3. 发布评论的交互

如果是评论文章,点击发布按钮,新增行:

  • no=中继器data数+1
  • picture和name不用填,因为直接用本人的名称和图片
  • huifu也为空就行了
  • text=输入框的text
  • date可以用日期函数获取到现在的时间[[Now.getFullYear()]]/[[Now.getMonth()]]/[[Now.getDate()]]
  • benren=1

如果是回复别人的评论,点击发布按钮,新增行:

  • no=item.no
  • picture和name不用填,因为直接用本人的名称和图片
  • huifu=item.name
  • text=输入框的text
  • date可以用日期函数获取到现在的时间[[Now.getFullYear()]]/[[Now.getMonth()]]/[[Now.getDate()]]
  • benren=1

今天的分享就结束了,这个原型做起来可能对初学者会有点难,但是做好之后交互效果齐全,使用也简单,只需要填写中继器表格即可。

作者:梓贤vigo;


微信公众号:Axure高保真原型,分享一系列产品经理常用的原型模板、教程、视频、文档等原创内容


本文由微信公众号:Axure高保真原型 授权发布,未经许可,禁止转载

相关文章
|
23天前
Axure设计之多级菜单导航教程(中继器)
在数字化时代,优化产品设计,提升用户界面交互,是产品设计着重考虑的点。针对传统菜单导航复杂繁琐的问题,本设计提出了一套灵活的菜单导航方案,结合中继器与动态面板,实现一键搜索、菜单收藏、多级菜单导航、点击展开收缩等交互功能,旨在提升领导满意度,增强产品设计体验。
|
2月前
|
数据处理 UED
Axure中继器教程及案例详解
Axure RP 是一款强大的原型设计工具,广泛应用于产品设计、UI/UX 设计及交互设计中。中继器(Repeater)作为 Axure 中的一个重要元件,以其强大的数据处理和动态交互能力,成为设计师们不可或缺的工具。本文将从中继器基础、进阶、高级应用,以及分页控制、合计、列表拖动、列表滑动删除、表内修改等方面,详细介绍中继器的使用方法和案例。
Axure中继器教程及案例详解
|
3月前
|
UED
Axure设计之单选框教程(中继器)
在Axure RP中,通过结合中继器的强大功能,我们可以轻松实现动态加载的单选框列表,不仅可以根据数据自动调整选项宽度,还能实时更新选中状态。本教程将引导你完成一个使用中继器制作动态单选框列表的项目,包括案例分析、设计思路及详细的实现步骤。
Axure设计之单选框教程(中继器)
|
3月前
Axure 母版与元件
Axure 母版与元件
34 0
|
3月前
Axure 元件--基本元件
Axure 元件--基本元件
34 0
|
6月前
产品入门第六讲:Axure中继器
产品入门第六讲:Axure中继器
|
数据可视化
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格
【Axure教程】自动轮播的中继器表格