首页
正文
人人都是产品经理
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 演示时的效果,那是因为还有后续的交互未添加,不要着急。因为还没有到算总和的时候,所以我先把总计部分的元件盖住了。