axure中继器求和_中继器使用场景（二）：购物车金额实时求和

本文详细讲解了购物车金额的实时求和，一起来看看~

本文涉及到：点击“购物车图标”增减购物商品数量；多次点击购物车图标，只增加数量，不重复添加条目。在我的上一篇教程《中继器使用场景(一)》中有具体操作办法，在此不做赘述。

Axure中的一个难题：中继器数据实时求和

先看一下运用在购物车实景操作中的效果，下方GIF图：大家重点看“最下端的金额”变化，根据商品的多少、数量的多少，实时对数据求和。

为了讲解清晰，我将高保真原型的逻辑提炼成简单的部件，GIF图展现如下：

首先，我们准备如下元件

每个元件解释如下：

1、商品列表中继器(goods list)，包含：购物车图标(shopping)、商品名称(name)、商品价格(price)、商品数量(shuliang)，其中商品数量(shuliang)不绑定元件赋值，只存在数据集中。

各项目赋值及初始值情况如下图：注意¥符号的摆放位置。

2、购物车列表中继器(shoppinglist)，包含：商品名称(name)、商品价格(price)、商品数量(shuliang)，增加数量的“+”号(add)，减少数量的“-”号(minus)，每项的金额小计(xiaoji)。

各项目赋值及初始值情况如下图：其中展示数量的元件，即在加减号中间的那个元件，必须是文本框，此步非常重要。注意¥符号的摆放位置。

3、过渡计算用的中继器(temp)：此元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。包含商品名称(name2)该项不绑定元件赋值，只存在数据集中。提取购物车列表中继器shoppinglist中的小计项目xiaoji2。

各项目赋值及初始值情况如下图：

4、将各行“小计”金额数字脱离中继器，取出数值用的矩形，命名为number。特别注意：此处必须是矩形，不能用文本框，具体原因，后续会讲解到。此步非常重要，此元件，在项目调试完毕后，设置为隐藏。在教程中，为了讲解，未做隐藏。

5、将上一步矩形number中的数值，转变为数组的文本框，命名为numbergroup。特别注意，与上一步相反，此处必须是文本框，不能为矩形，具体原因，后续会讲解到。此步非常重要，此元件，在项目调试完毕后，设置为隐藏。在教程中，为了讲解，未做隐藏。

6、将上一步文本框numbergroup中的数值，进行数字的第一步提取，一共准备三个文本框，分别命名为1、2、3，这些元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。

7、将上一步文本框1、2、3中的数值，进行数字的第二步提取。一共准备三个文本框，分别命名为1-1、2-2、3-3，这些元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解