在绘制电商原型或官网原型，通常会涉及到总价的计算。可以利用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，三来正在年底了，在反思这一年来的点点滴滴，所以文章更新缓慢，请大家见谅哈～ 效果图 实现逻辑 我们使用一个动态面板，为其添加三种状态下的页面，在不同的状态，页面拖动结束时，动态面板切换到目标页面，并且移动到合理的位置，就轻松的实现了一个页面拖级拖动的效果。 实现步骤 第一步，我们添加一个…
