Axure中继器实现购物车总价格、数量加减计算操作实例

0 2021-06-07 11:09 内容校对:盖帽老弟
收藏(0) 共有 127 人学习了本教程

《Axure中继器实现购物车总价格、数量加减计算操作实例》是一篇关于Axure的学习教程,通过简单几步就能实现教程中的效果图效果,当然只学习这一点,并不能完全掌握Axure技巧;你可以通过此加强操作实例,交互产品等多维度案例或实操来进行更多的学习;此教程是由zilin在2021-06-07发布的,目前为止更获得了 0 个赞;如果你觉得这个能帮助到你,能提升你Axure技巧;请给他一个赞吧。

今天教大家用Axure中继器实现购物车总价格、数量加减计算操作实例,根据商品的数量和价格,对应获得正确的总价,快来挑战一下吧,具体操作步骤如下:

实例演示

Axure中继器实现购物车总价格、数量加减计算操作实例

一、简要设计思路:

  1. 点击增加按钮
  2. 数量增加1
  3. 总计金额相对应增加商品单价

同理,

  1. 点击减少按钮
  2. 数量减少1
  3. 总计金额相对应减少商品单价

二、外部准备工作:

中继器,两个文本标签,一个文本标签写上预算;另一个文本标签取名为total用于显示金额。

Axure中继器实现购物车总价格、数量加减计算操作实例

中继器内部制作准备:图片元件取名为tp,三个文本标签分别取名为mc、jg和sl,减号按钮,加号按钮。

Axure中继器实现购物车总价格、数量加减计算操作实例

中继器交互用例设置:中继器添加三列分别为tp、mc、jg,然后添加数据。

Axure中继器实现购物车总价格、数量加减计算操作实例

中继器每项加载时添加用例:每项加载时,设置文本jg的值等于函数¥[[]]、文本mc的值等于函数[[]]、设置图片tp的值等于函数[[]]。

Axure中继器实现购物车总价格、数量加减计算操作实例

Axure中继器实现购物车总价格、数量加减计算操作实例

Axure中继器实现购物车总价格、数量加减计算操作实例

中继器交互用例完成之后,最主要的就是,后面在加减号按钮上添加的交互。

加号按钮添加用例:当鼠标点击时添加用例

设置:

文本sl的值=函数[[LVAR1+1]]-局部变量函数LVAR1=元件sl的文字

Axure中继器实现购物车总价格、数量加减计算操作实例

设置:

文本总价total的值=函数¥[[(1)+]]

((1):表示从第二个字符开始,截取当前交互所控制的total元件里面的文字字符)

Axure中继器实现购物车总价格、数量加减计算操作实例

减号按钮添加用例:当鼠标点击时添加用例——添加条件sl>0

(不添加条件的话当你点击减号会出现负数)

  • 设置文本sl的值=函数[[LVAR1-1]]-局部变量函数LVAR1=元件sl的文字(这一步就不上图片了,跟上面的加一样。只不过函数“[[LVAR1+1]]”里面的“+”变成了“-”)
  • 设置文本总价total的值=函数¥[[(1)-]](这一步也是和上面的一样)

Axure中继器实现购物车总价格、数量加减计算操作实例

以上就是Axure中继器实现购物车总价格、数量加减计算操作实例全部内容介绍了,关于更多axure9教程信息,欢迎关注北极熊素材库,给你带来最丰富的素材图片和最有用的教程,更多最新资讯。

0

赠人玫瑰,手有余香

本内容由zilin原创发布,小编仅对内容版式进行调整,如有侵犯你的权利,请联系我们。

如果你觉得好,你可以将本课程转发给你的朋友!

参与评论
验证码

输入的验证码不正确

0/10000

评论区

暂无评论

zilin

阿里巴巴UI设计师——你的想像,世界的模样。

共发布了870个文章 共获得48个赞

最新发布的教程

查看更多此作者的教程
用户给我们的评价
北极熊素材库累计为超过1000+家中小企业提供服务
欢迎来到北极熊素材库

使用微信扫码登录

使用账号密码登录

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

立即注册 | 找回密码

登录失败

注册及代表同意 网站协议
扫码登录及代表同意 网站协议

请输入用户名,6-15个字符

请输入绑定的邮箱

验证码

输入的验证码不正确

登录失败

提示信息

内置密码的链接已通过Emall 发送到你的邮箱中,请在三天内修复密码。

3秒后,将关闭此窗口 立即关闭

请输入用户名,6-15个字符

请输入密码,最少6-15个字符

二次密码不一致

请输入正确的邮箱

验证码

输入的验证码不正确

注册失败

您还不是我们的VIP会员

成为我的的VIP会员
即可享受6大特权并免费高速下载数以万计的设计素材,助力您的工作和学习

立即升级VIP会员