购物车加减数量很常用,那么如何用Axure制作带有真实效果的组建呢?
1. 首先画出一下组件:用到“输入框”,“按钮”
2. 点击“-”按钮,添加点击事件。这里我们将设定条件,即当输入框中的值大于0时,才可进行操作:
设定完条件,就可以增加点击事件了。我们首先为输入框设定一个名称,我这里设置的是“dd”。点击的效果,是要修改输入框内的值,所以我们选择组件中的“Set text”(中文应为设定文字)。
当选中需要改变的输入框名称“我设定的是dd”后,修改它的“值得”。这时会在输入框后出现函数“Fx”图标。点击图标进入窗口,重点来了。我们要在这里创建一个局部变量,用以获取此时在输入框中的值,获取之后再对它进行减少的操作。
上图中,首先在1的区域创建一个局部变量,然后在后面的下拉框中选择要获取的组件的文字(也就是dd);之后在上面2的区域选择“Insert Variable or Function”(插入变量),选择刚才设定的局部变量名,我设置的是“s”。你会在输入区域看到[[s]]。现在我们需要进行运算,注意要把运算符号写在中括号中,最终的效果是 [[s-1]]。
确认后,可以看到函数已经应用。现在的流程是:
1. 当用户点击“-”时候,会首先判断输入框中的值;
2. 如果小于0,则不会执行减值的操作;如果大于0,则继续执行;
3. 设定局部变量,获取到输入框中的值,并且对他进行-1操作;
4. 把运算后的结果,输出在输入框中,动作完成。
同理,我们进行“+”的操作,一切相同,只是在运算时需要加值,也就是[[s+1]]。如果你不想设定上限,也不用在设定条件了。
完成后,如果常用到,就保存为组件随时调用吧。