【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高保真原型 授权发布,未经许可,禁止转载

相关文章
|
人工智能 自然语言处理 算法
GPT-4 Turbo 和 GPT-4 的区别
GPT-4 vs GPT-4 Turbo: 探索OpenAI的顶级模型,GPT-4以其出色的文本生成和理解闻名,适合高端内容需求,但成本高;GPT-4 Turbo,优化版,提供相似性能但更高效、经济,适用于大规模商业应用,尤其在速度和资源效率上展现优势。用户可根据质量、效率和成本需求选择合适模型。
394 4
|
11月前
|
API 内存技术
鸿蒙next版开发:相机开发-拍照(ArkTS)
在HarmonyOS 5.0中,ArkTS提供了一套完整的API来管理相机功能,特别是拍照功能。本文详细介绍如何在ArkTS中实现拍照功能,包括导入接口、创建会话、配置会话、触发拍照及监听拍照输出流状态,并提供代码示例进行详细解读。通过本文,你将掌握如何在HarmonyOS 5.0中使用ArkTS实现高效的拍照功能。
559 7
|
11月前
|
API UED 开发者
鸿蒙next版开发:ArkTS组件通用属性(透明度设置)
在HarmonyOS 5.0中,ArkTS引入了透明度设置属性`opacity`,允许开发者自定义组件的透明度,从而创建复杂的视觉效果和提升用户体验。本文详细解读了`opacity`属性的用法,并提供了示例代码,展示了如何在不同透明度下展示组件。透明度设置在UI开发中具有多种用途,如创建重叠效果、增强美观性和实现动画效果。
969 7
|
11月前
|
API 开发者 UED
鸿蒙next版开发:ArkTS组件通用属性(形状裁剪)
在HarmonyOS 5.0中,ArkTS引入了形状裁剪的通用属性,支持矩形、圆形、椭圆及自定义路径等多种形状的裁剪和遮罩处理。本文详细解读了clip、clipShape、mask和maskShape属性,并提供了示例代码,帮助开发者实现多样化的界面设计和动画效果。
626 1
|
12月前
|
机器学习/深度学习 算法 Python
深度解析机器学习中过拟合与欠拟合现象:理解模型偏差背后的原因及其解决方案,附带Python示例代码助你轻松掌握平衡技巧
【10月更文挑战第10天】机器学习模型旨在从数据中学习规律并预测新数据。训练过程中常遇过拟合和欠拟合问题。过拟合指模型在训练集上表现优异但泛化能力差,欠拟合则指模型未能充分学习数据规律,两者均影响模型效果。解决方法包括正则化、增加训练数据和特征选择等。示例代码展示了如何使用Python和Scikit-learn进行线性回归建模,并观察不同情况下的表现。
1528 3
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的智慧校园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的智慧校园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
195 0
|
安全 搜索推荐 机器人
纳米技术与医疗:纳米机器人的临床应用前景
【9月更文挑战第28天】纳米机器人作为纳米技术在医疗领域的重要应用,正逐步改变着传统医疗的面貌。它们在药物输送、癌症治疗、手术辅助和疾病诊断等方面展现出广阔的应用前景。随着科学技术的不断进步和纳米技术的不断成熟,我们有理由相信,纳米机器人将成为医疗领域的一个重要且不可或缺的组成部分,为人类的健康事业做出更大的贡献。同时,我们也应关注纳米技术的安全性和可靠性问题,确保其在医疗应用中的安全和有效。
|
网络架构
直通网线的标准颜色顺序
【8月更文挑战第5天】
908 2
直通网线的标准颜色顺序
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园活动管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园活动管理平台的详细设计和实现(源码+lw+部署文档+讲解等)
240 0
|
NoSQL Redis
TongRDS与Redis数据类型的对比、开发板、标准版、企业版区别
TongRDS与Redis数据类型的对比、开发板、标准版、企业版区别
619 2