在绘制电商原型或官网原型,通常会涉及到总价的计算。可以利用Axure的中继器+文本框+函数来实现,以下以一个Saas软件根据购买时间来计价的例子来讲解,实际效果如图:

绘制步骤:
1.绘制静态原型图
绘制价格文本,并备注为“价格”标签,如图所示

放置中继器,备注为“天数”标签;放置文本输入框

2.文本框数据录入到中继器存储
事件1:给文本框设置动态交互事件,当文本框中的数据变化后更新中继器中的列

,通过临时变量将文本框中的参数传递到中继器中

事件3:当中继器加载时,将中继器中item.Column0中的数值传递到文本框的静态文本上,有点像临时缓存数据,否则数据仍是一开始初始化的值

3.将中继器中的事件参数结合计算公式赋值到“价格”标签
通过事件:引入价格计算公式,根据购买时长计算总价,如图所示

本文来自蔬香四溢,本文观点不代表PmTemple立场,转载请联系原作者。原文链接:


相关推荐
-
Axure RP 8.0 快捷键大汇总
在网上看了一下Axure的内容都是7.0版本之前的,在这里我重新整理了一下Axure RP 8.0版本的快捷键提供给大家参考学习。使用快进键的好处是:让你用更短的时间更高效的去使用一个软件工具。 其实你要是对一个工具软件的快捷键使用的得心应手,那它给你的感觉就不再是一个工具,而是你的一双巧手。在电脑代码的世界里书写一个个美丽的传奇,让设计变得好像玩游戏一样,…
-
Axure教程-Axure制作会员注册即时反馈交互效果
该案例实现的交互效果是: 当用户在输入框输入信息进行判断,若输入错误则立即显示红色错误提示;如果文本输入框符合要求则隐藏错误提示;如果全部输入框都符合要求,点击【立即注册】,弹出注册成功的信息。 实时验证演示效果.gif 注册成功演示效果.gif 根据交互效果我们可以得到如下思路: 要给每个文本框添加判断条件,因为符合条件要隐藏错误提示,不符合条件要显示错误…
-
Axure RP 9 教程—模拟微信系列3.模糊查询
今天我们来讲模拟微信的第三篇,本次模拟的主要内容是利用中继器和LVAR.indexOf(”)函数实现模糊查询,除了模糊查询,我还对之前两个版本的原型进行了进一步的优化,大家可以下载自行研究。 效果图 模糊查询可以根据用户的名称和用户的消息内容进行查询。 制作原理 LVAR.indexOf(‘A’)函数: LVAR表示在哪儿…
-
Axure教程-axure制作动态图片墙
研究了网上的原型例子,自己尝试着重新做了一次,基本效果全部达到,视觉效果也还算满意,感觉可以试着写篇教程。不过毕竟是第一次,有些细节地方可能理解的也不到位,haha 下面是两张效果图: 动态图片墙,主要实现的功能是图片悬停的动态模糊及点击…
-
Axure RP 9 教程—基本功能介绍1
Axure RP 9 教程—基本功能介绍1 应广大网友要求,接下来一段时间会对Axure RP 9 的基础功能进行一定程度的介绍,一来方便新手迅速了解Axure,二来比对新版Axure与Axure 8的区别,更快了解新版本Axure 界面介绍 下边就根据上图的区域划分介绍Axure RP 9: 分区1:复制、剪切及粘贴区域 很好理解,使用方式和win电脑的快…
-
Axure教程-左右双向列表带计数选择
列表框左右双向选择效果在互联网平台中应用非常多,从左侧的待选项中选中选项移入右侧,从右侧的已选项中取消选项移入左侧。PMGOD将通过这篇案列分享,教大家使用Axure制作实现“双向列表带计数选择” 演示地址:穿梭器:双向列表带计数选择 实现效果 1、双向列表均为单项选择,不支持多选或全选; 2、移入选项、点击选项时分别有文字颜色或…
-
Axure教程:如何在中继器中,动态实现表单增删改?
本文作者分享了自己在中继器中动态实现表单增删改的方法,一起来看看吧~ Repeater控件的使用步骤为: 需求:在Axure中动态的实现表单的增删改。 一、定义元素: 双击中继器。 二、添加数据: 注:为了方便后面添加数据,对于元件我们需要进行命名,如何命名在这里我就不说了。 选中“中继器”,设置属性,添加数据。 三、绑定数据: (这里选择加载时的用例,相当…
-
简易WEB服务本地搭建,实现局域网和手机访问到axure原型的html
最近还是有看见一些人在问,怎么让手机可以访问Axure原型,怎么让局域网可以访问我电脑里的Axure原型;下面是最简单省事做法! 一. 工具:WAMP(全称Windows Apache Mysql PHP) ; 二. 原理:通过搭建域名让其可以访问到本地搭建好的服务器! 三. 下载地址: WAMP(有提供32位和64位的)http://www.wampser…
-
Axure教程-摩拜单车扫码开锁
上篇文章,完成了摩拜登录的模块,登录完了,干啥呢?当然是扫码用车呀。 这篇文章给大家讲讲扫码的效果怎么做。 观察: 摩拜的扫码是单向扫的,一根航线从上往下扫,循环的扫啊扫。 我们用最简单的方式,实现方案: 1、准备横线,注意到这个横线是个类似椭圆中粗边细的形状,命名line,我们用圆来变形,宽220,高…
-
Axure RP 9 教程—页面三级拖动
好久没有更新文章了,一来工作比较饱和,二来闲暇时间都在研究python,三来正在年底了,在反思这一年来的点点滴滴,所以文章更新缓慢,请大家见谅哈~ 效果图 实现逻辑 我们使用一个动态面板,为其添加三种状态下的页面,在不同的状态,页面拖动结束时,动态面板切换到目标页面,并且移动到合理的位置,就轻松的实现了一个页面拖级拖动的效果。 实现步骤 第一步,我们添加一个…