当前位置: 首页 > news >正文

Axure中继器实现时间读取和修改

亲爱的小伙伴,在您浏览之前,烦请关注一下,在此深表感谢!

课程主题:中继器实现时间读取和修改

主要内容:中继器内不同时间格式的向外读取,和向内赋值,实现中继器时间的修改

应用场景:修改表单、变更时间

案例展示:点击修改——显示修改页面并读取待修改时间——赋值新时间——修改中继器时间

本课重点:不同时间格式的获取方法和赋值方法

演示视频 

中继器实现时间读取和修改


正文内容:实现流程点击修改按钮——标记行——修改页面显示要修改的内容——修改页面进行输入——点击确定——修改中继器制定行时间数据;

步骤一:设计“修改页面”作为我们修改中继器数据的录入窗口,注意文本框的时间格式,载入时隐藏(需要时由修改按钮调出)

1

2

3

因为注销时间是文本格式,我们还要方便的去修改,那么就要设置相应的便捷输入界面如下

4

将以上四个元件组合,命名为1,设置载入时隐藏,点击注销时间文本框显示

5

6

步骤二:添加修改交互,点击修改——显示修改页面——标记当前行——传出文本给文本框

7

8

步骤三:添加“修改页面”的交互,用户在修改页面输入内容后,我们将文本在赋值给中继器的标记行。实现路径:单击时——隐藏修改页面——更新行——目标中继器——已标记——对应列值

9

10

11

12

13

此时我们已经完成了从中继器内取值——时间修改——赋值给中继器的过程。

但还会有以下的问题【步骤四】

步骤四:这时我们发现一个问题,从用户实操的场景出发,如果用户在填写过程中,可能会出现如下两种情况:

1、不想修改了怎么办?解决方案:添加右上角关闭按钮,点击隐藏修改页面

2、还想回退一下看看修改前的数据?

中继器只支持从内向外数据读取,不支持从外向内读取,那么此时我们怎么二次读取中继器标记行的数据呢?而且第一种情况的解决方案简单粗暴,实际上数据还在缓存中,没有彻底解决问题!经过多次尝试从外向内读取失败后,换了拿数据的方法,我们不从中继器外向内读取数据,可以在中继器修改按钮交互触发时,向外多输出一份数据,这样,我们实际上拿到了两份标记行的数据,一份作为修改使用,另一份作为备份,当我们需要时再次使用!这样做最大的好处时省时省力,方便易操作。

14

复制一个新的修改页面,命名为修改页面2,从中继器内多输出一份标记行数据给页面2

15

16

下边设计取消按钮的交互

17

步骤五:设计修改页面的拖动效果,支持用户在前台的随意拖动,友好性设计(完工)

18


本课小结:中继器内不同时间类型的读取和修改需要我们取到text文本,根据中继器的从内到外取值的特性,从外部读取内部信息需要我们思考方法;不同的视角去解决我们要达到的目标,柳暗花明又一村。

相关课程直通车

Axure复选框全选反选取消高级交互-CSDN博客

Axure横向菜单高级交互-CSDN博客

Axure垂直菜单展开与折叠-CSDN博客

Axure树形菜单展开与折叠-CSDN博客

如有其他相关问题,欢迎私信沟通,关注  结构化知识课堂-CSDN博客

明天的产品大咖就是你,创作不易,麻烦关注一下,点赞+收藏,感谢大家!

http://www.lryc.cn/news/467294.html

相关文章:

  • 数据库聚合函数
  • DevOps的文化观与工具
  • create-vite my-vite-uniapp-project
  • DC系列靶机-DC8
  • 重构复杂简单变量之用对象替换数据值
  • 我国首个自主可控的操作系统——华为原生鸿蒙操作系统正式发布
  • Spring Boot技术栈在论坛网站开发中的应用
  • Fast-LLM:加速大型语言模型训练的开源库
  • 物理安全(Physical Security)
  • Go语言开发环境搭建
  • 嵌入式硬件设计:技术与实践
  • vue中使用echarts,导入JSON数据画图
  • 【C++篇】探索STL之美:熟悉使用String类
  • ETLCloud搭配MySQL | 让关系型数据库更智能
  • Java 开发——(上篇)从零开始搭建后端基础项目 Spring Boot 3 + MybatisPlus
  • Psychophysiology:脑-心交互如何影响个体的情绪体验?
  • FunASR实时语音识别内网部署 | 无网络环境中的实时语音识别 | 实时语音识别
  • 【设计模式-状态模式】
  • 【代码随想录Day50】图论Part02
  • 帝国CMS 内容页调用上一篇下一篇的方法(精华汇总)
  • (7)c++复合数据类型之数组
  • 2.1 > Shell 是什么、如何更熟练的使用 Bash Shell
  • YOLO V3 网络构架解析
  • 【zlm】 webrtc源码讲解(二)
  • 5G RedCap工业路由器赋能电力物联网应用
  • 029.浏览器自动化-抓取#document下的内容
  • 2024前端html5,css3面试题总汇
  • css实现外层不换行,内层换行
  • word取消自动单词首字母大写
  • flex常用固定搭配