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

首页

正文

人人都是产品经理

2018-08-29

中继器使用场景(二)：购物车金额实时求和

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

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

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，这些元件，在项目调试完毕后，设置为隐藏，在教程中，为了讲解，未做隐藏。

8、合计金额用的文本框 totalmoney，摆放位置在购物车列表中继器下方，单独存在，不放在中继器中。

接下来，我们说思路：

在商品列表中继器 goods list 中点击购物车图标 →在购物车列表中继器 shoppinglist 中产生小计的金额 →通过过渡计算用的中继器 temp，将小计金额单独提取出来 → 中继器内不能直接求和，将小计金额的数字分离出中继器即矩形 number → 因为分离出来的是带格式的无法分割的文本，要转换为数组 文本框 numbergroup → 将数组分成单个的数字 → 将数字相加。

大功告成。

接下来，开始添加交互

1、在商品列表中继器 goods list 中的购物车图标添加交互，截图如下：

交互解释：

Case 1、Case3 的交互解释参看《中继器使用场景(一)》的具体讲解，在此不做赘述。主要功能就是实现当除了第一次点击购物车以外，以后的重复点击，在购物车列表中只增加数量，而不重复添加条目，同时因为数量增加了，小计金额不断增加

所以 Case3 的交互多了一个更新项目，为购物车列表 shoppinglist 计算小计金额："xiaoji" 一项的函数为： [ [ ( Item.price*Item.shuliang ) .toFixed ( 2 ) ] ] ，意思为：价格 × 数量。

然后将结果四舍五入保留两位小数，toFixed ( ) ，在实际预览时，有时保留两位小数，有时没有，谁知道怎么回事，不影响结果，无所谓，大家知道意思就行了。

Case2 交互解释如下：

条件：if " [ [ Item.shuliang ] ] " == "1"，旨在界定是第一次点击购物车图标，解释参看《中继器使用场景(一)》的具体讲解

第一步，在购物车列表中继器 shopping 中添加一行新数据，具体对应数据绑定如下，其中 "xiaoji" 一项的函数为： [ [ ( Item.price*Item.shuliang ) .toFixed ( 2 ) ] ] ，函数意思在上文做了说明，不做赘述。

第二步：在过渡计算用中继器 temp 中添加一行新数据，具体对应数据绑定如下：

解释：将购物车列表页中继器 shopping list 中的小计项单独提出来。

重点 1：注意 name2 的绑定。

重点 2：xiaoji2 的函数形式 [ [ Item.price*Item.shuliang.toFixed ( 2 ) ] ] ，注意 的摆放位置，这个日后要做分割数组的标志，非常重要。这个 符号，可以为任何符号，但是一定要写在 [ [ ] ] 外面，并且写在末尾，后续具体解释，此步非常重要。

写到这一步，我们来看看交互效果 GIF，注意过渡计算 temp 中的数值， 符号的位置。

另外，大家在演示时，会发现你们的原型购物车列表中的数量在＞1 时，过渡计算用的中继器 temp 数据不更新，不像我的 gif 演示时的效果，那是因为还有后续的交互未添加，不要着急。因为还没有到算总和的时候，所以我先把总计部分的元件盖住了。