源码时代UI设计干货分享|带你用AXURE实现购物车功能 (1)

缺乏、安全感 2023-06-18 05:54 14阅读 0赞

1，新建AXURE页面，利用椭圆元件绘制两个基本按钮功能“-”和“+” 并且给出相应的命名minus（减）和add（加）  
![Iamge][]  
![Iamge][Iamge 1]  
2，添加标题元件修改标题为默认数字“0”（购物车的基数都是从0开始的） 并且命名为：num（number）

![Iamge][Iamge 2]

3，设置添加“+”交互函数

![Image][]

（1）设置属鼠标单击时

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx_size_16_color_FFFFFF_t_70]  
（2）设置文本选择num元件

（3）设置函数变量fx ![Image][Image 1]

（4）插入变量函数（因为在没点击“+”的时候当前的值都是在原有值的基础之上添加 1，所以当前变量值是属于一个局部变量值）设置样式为当前显示 注意当前元件一定要选择num否则实现不了数字改变效果。

![Image][Image 2]

（5）设置当前局部变量函数值 +1的效果。插入变量函数设置：\[\[LVAR1+1\]\] 设置完成后点击确定 然后 F5预览  
![Image][Image 3]  
![Image][Image 4]  
![Image][Image 5]  
4，实现减号交互函数，基本原理同上，唯一区别是：当前插入局部变量函数 -1 效果：\[\[LVAR1-1\]\] 然后点击确定 并F5预览  
![Image][Image 6]  
![Image][Image 7]  
![Image][Image 8]  
![Image][Image 9]  
5，聪明的小伙伴会发现，一直点击减号的话 会减成负数，  
![在这里插入图片描述][20191130160855539.png]  
6,这时候就需要进行设置判断，当num的值 >1的时候再执行减法 所以继续设置case案例–选择case1 并点击“添加条件”  
![Image][Image 10]

7，设置函数效果如下：if 文字于 num > "0"  注意：执行顺序是  先判断条件，然后再执行-1的函数效果  这样减到0的时候就不能减了。

![image][]  
![image][image 1]  
![image][image 2]

[Iamge]: https://img-blog.csdnimg.cn/20191130160013898.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Iamge 1]: https://img-blog.csdnimg.cn/20191130160021904.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Iamge 2]: https://img-blog.csdnimg.cn/20191130160035756.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image]: https://img-blog.csdnimg.cn/20191130160045964.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191130160611286.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 1]: https://img-blog.csdnimg.cn/20191130160620720.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 2]: https://img-blog.csdnimg.cn/20191130160631473.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 3]: https://img-blog.csdnimg.cn/20191130160639238.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 4]: https://img-blog.csdnimg.cn/20191130160646870.png
[Image 5]: https://img-blog.csdnimg.cn/201911301606571.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 6]: https://img-blog.csdnimg.cn/20191130160705411.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 7]: https://img-blog.csdnimg.cn/20191130160714913.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 8]: https://img-blog.csdnimg.cn/20191130160727497.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[Image 9]: https://img-blog.csdnimg.cn/2019113016073736.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[20191130160855539.png]: https://img-blog.csdnimg.cn/20191130160855539.png
[Image 10]: https://img-blog.csdnimg.cn/20191130160911385.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[image]: https://img-blog.csdnimg.cn/20191130160943143.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[image 1]: https://img-blog.csdnimg.cn/20191130161014133.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3p6YzE5OTgxMjIx,size_16,color_FFFFFF,t_70
[image 2]: https://img-blog.csdnimg.cn/20191130161041177.png