本文详细讲解:利用Axure中继器实现商品数量的增减,以及商品价格的总计的操作流程。
![7f8f4e8860455462425285bd40ae1c47.png](https://i-blog.csdnimg.cn/blog_migrate/5078b2c56bbac07459babbeb467e26b1.jpeg)
一般在做购物车、预算表中都会涉及到商品数量的增减,与商品价格的合计。
那么,我们怎么通过中继器来实现这个效果呢?本文将详细讲解此类设计的交互用例。
首先看下效果:
![8fc50cb1a63806d6da1a7637e578400d.gif](https://i-blog.csdnimg.cn/blog_migrate/eb53a796a8e6a7d67a2a486c5eef1fc0.gif)
一、简要设计思路:
- 点击增加按钮
- 数量增加1
- 总计金额相对应增加商品单价
同理,
- 点击减少按钮
- 数量减少1
- 总计金额相对应减少商品单价
二、外部准备工作:
中继器,两个文本标签,一个文本标签写上预算;另一个文本标签取名为total用于显示金额。
![9bff363e35419da49b62acd14fa37427.png](https://i-blog.csdnimg.cn/blog_migrate/e82fb3e9fd66518926f3d1dbd25db7fc.jpeg)
中继器内部制作准备:图片元件取名为tp,三个文本标签分别取名为mc、jg和sl,减号按钮,加号按钮。
![194c5819601a072f3effd2efc60a8f9a.png](https://i-blog.csdnimg.cn/blog_migrate/33c07a82e24349d7d979b5c7edbab123.jpeg)
中继器交互用例设置:中继器添加三列分别为tp、mc、jg,然后添加数据。
![e22fd60cd6e87d1a97336fd1ad2e7c78.png](https://i-blog.csdnimg.cn/blog_migrate/ce0137b46342105e773a819d4e2638a4.jpeg)
中继器每项加载时添加用例:每项加载时,设置文本jg的值等于函数¥[[Item.jg]]、文本mc的值等于函数[[Item.mc]]、设置图片tp的值等于函数[[Item.tp]]。
![47e1e3a04104592fa5501be5997c80e3.png](https://i-blog.csdnimg.cn/blog_migrate/57101e4d3cb6118fca371f94d209fe41.jpeg)
![9709a7a71bf94e3ba717e392c1f7ea08.png](https://i-blog.csdnimg.cn/blog_migrate/a008fedcc347c6ed3a06a56ee2e6aa1c.jpeg)
![64944e608f5f757b1ea4ae292ca3d375.png](https://i-blog.csdnimg.cn/blog_migrate/30e247dfea5a3e89158f36cf7f142885.jpeg)
中继器交互用例完成之后,最主要的就是,后面在加减号按钮上添加的交互。
加号按钮添加用例:当鼠标点击时添加用例
设置:
文本sl的值=函数[[LVAR1+1]]-局部变量函数LVAR1=元件sl的文字
![f33d407f7af58783eaa20dfab232ac7f.png](https://i-blog.csdnimg.cn/blog_migrate/d1a0710222047c8e8ad73cd378ddca9c.jpeg)
设置:
文本总价total的值=函数¥[[Target.text.slice(1)+Item.jg]]
(Target.text.slice(1):表示从第二个字符开始,截取当前交互所控制的total元件里面的文字字符)
![e93f87e5c4e1af0fa5a51e9bf0256fda.png](https://i-blog.csdnimg.cn/blog_migrate/e4e848181c66984d093c2b4c9deac05e.jpeg)
减号按钮添加用例:当鼠标点击时添加用例——添加条件sl>0
(不添加条件的话当你点击减号会出现负数)
- 设置文本sl的值=函数[[LVAR1-1]]-局部变量函数LVAR1=元件sl的文字(这一步就不上图片了,跟上面的加一样。只不过函数“[[LVAR1+1]]”里面的“+”变成了“-”)
- 设置文本总价total的值=函数¥[[Target.text.slice(1)-Item.jg]](这一步也是和上面的一样)
![4c792f85002876ba4f9e94319817edee.png](https://i-blog.csdnimg.cn/blog_migrate/ae5fe6323ae21e3aaceda5f931b96a8c.jpeg)
设置到这里基本已经好了,大家预览一下看看。
如果还有什么问题可在评论区回复,我们一起讨论!
本文由 @zero 原创发布于人人都是产品经理,未经许可,禁止转载
题图来自Unsplash,基于 CC0 协议