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

1，新建AXURE页面，利用椭圆元件绘制两个基本按钮功能“-”和“+” 并且给出相应的命名minus（减）和add（加）

2，添加标题元件修改标题为默认数字“0”（购物车的基数都是从0开始的） 并且命名为：num（number）

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

（1）设置属鼠标单击时

（2）设置文本选择num元件

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

（5）设置当前局部变量函数值 +1的效果。插入变量函数设置：[[LVAR1+1]] 设置完成后点击确定 然后 F5预览

（1）首先建立一个空白页面，然后画出一个大矩形，两个数量加减的小矩形（分别命名为“+”“-”，可以填充一下颜色），最后画一个实现数量加减的文本框，命名为“数量”.如图所示。

（2）首先选中“-”号矩形，在属性里给它添加事件，鼠标单击时，如图所示。

（3）点击设置文本，在窗口右边选择我们要实现效果的元件，也就是“数量”，如图所示。

(4)点击窗口右下方设置文本值里面的fx,插入函数，如图所示。

（5）点击添加局部变量，为变量命名，我们取名为num（可自定义），第二个选择元件文字，第三个选择我们命名的“数量”，在插入变量与函数里输入 [[num-1]]，点击确定。如图所示。

（6）我们的“-”就做好了但是购物车数量可不能为负数哦，所以要给他设置条件，点击添加条件，给它设置条件，点击确定，如图所示。

（7）“+”的效果，依照2-4步，（5）步在插入变量与函数里输入 [[num+1]]，点击确定。如图所示。

（8）这样我们一个利用AXURE就做出了一个单击“+”“-”按钮，实现购物车数量加减的效果了。

从元件库里拉入中继器，在面板中双击进入中继器编辑面板

进入后给你的属性框（或你自定义的部件）在后侧的交互说明里填写名称，同时底部找到数据集、项目交互这两项

编辑数据集，编辑完成后进入到项目交互中找到每项加载时，进入到用列编辑选框，在数据集里编入的是文本就在用列编辑里选择文本（如果是图片就选择图片），选择完成后配置动作里有值的选项，点击fx进入编辑，在插入函数变量里，找到 item.XX(xx是你编辑数据集预先写好的）

---