中继器各项求和的实现方法

AxureRP8.0教程 小楼一夜听春语 2470℃ 0评论

在制作一些列表类的原型时,我们一般通过中继器即可实现。

不过,列表类的原型中,有时会需要进行求和计算。

例如购物车中的商品列表,当选中商品时,要显示各项商品款项的合计,而取消选中商品时,还需要从合计中减去该商品的款项。

类似下面这样一个列表,就是这样的一个具有代表性的交互效果。

接下来,我们一起来实现这个简单的交互效果。

第一步,我们先来准备使用到的元件,此处我只标注与交互有关系的元件。

页面中:

 

中继器“List”中:

中继器“List”属性中:

提示:数据集中的价格和数量均为数字,不添加人民币符号。

第二步,完成元件的准备之后,我们在中继器“List”的属性中,添加【每项加载时】的交互,完成数据与模板的关联。

提示:如果不了解中继器,请先阅读本站中的中继器入门文章《中继器结构与原理详解 》以及相关案例。

在这一步中,大家需要注意,在设置价格和小计时,要给价格和小计的前方添加人民币符号“¥”;每项商品的小计是通过“[[Item.Price*Item.Amount]]”计算后取得。

第三步,我们为中继器编辑区中的复选框添加【选中时】的交互,添加动作【设置文本】,勾选目标元件“Total”,并点击【fx】按钮,打开【编辑文本】的界面。

第四步,在【编辑文本】的界面中,我们填写计算公式。

这里大家注意,合计元件上的数值前面带有一个人民币符号“¥”,所以,不能直接对这个合计进行计算。

我们需要通过对这个目标元件(Target)的文本(text)进行截取(slice)的操作,从第2个字符截取到末尾,从而取到纯数字部分。

这里使用到的函数slice(start,end)是截取字符串的函数,它有两个参数start和end,分别为截取的起始位置与终止位置;参数end可以省略,省略这个参数时默认截取至末尾。

因为,字符串位置索引编号是从0开始,也就是说第1个字符的位置是0,所以我们通过slice(1)来截取从第2个字符至末尾的数字部分。

截取之后,用这个计算结果再加上价格乘以数量的结果,就是新的合计数值。

最后,我们在新的合计数值之前,仍然要加上人民币符号“¥”。

如下图所示,完整的计算公式为:¥[[Target.text.slice(1)+Item.Price*Item.Amount]]

第五步,参照前两步,我们为复选框添加【取消选中时】的交互,动作为【设置文本】于目标元件“Total”为【值】“¥[[Target.text.slice(1)-Item.Price*Item.Amount]]”。

提示:合计的计算公式中只是将加号修改为减号即可。

到这里,我们已经完成了选中商品时,合计增加,而取消选中商品时,合计减少的操作。

第六步,如果需要默认显示列表总和,我们可以在中继器的编辑区中,点击复选框,将它设置为默认勾选的状态(或者在元件属性中勾选选中的选项);并且,将复选框【选中时】交互中的动作复制到中继器的【每项加载时】交互中即可。

以上就是,通过中继器实现列表求和的方法。

最后,邀请大家关注微信订阅号“iaxure”(二维码在本站首页右上方),及时获取本站最新动态内容。

硬广插入:《两天掌握Axure RP 8》线下培训,北京、上海正在招生,报名地址http://www.kouer.com。

源文件下载:http://downloads.iaxure.com/repeater_sum.rp


~~~~~~~~~~~~ 正文结束 下面没了 ~~~~~~~~~~~~

小楼老师再出新作,倾力打造Axure RP 8精品课程系列,以最短的时间高效完成学习目标,入门进阶与实战案例并重,是0基础的新手从入门到精通的必备课程。

《AxureRP 8 入门与实战 - 入门篇》------从零入门进阶的最佳课程------【点此查看详情】

《AxureRP 8 入门与实战 - 案例篇》------实战手册图书的同步视频------【点此查看详情】


转载请注明:Axure原创教程网 » 中继器各项求和的实现方法

喜欢 (10)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 学习了! 😀
    亚索3652017-07-24 15:21 回复
  2. 受教,右上角手机找不到二维码
    Ash_白蜡2017-07-24 23:17 回复
  3. 小楼老湿,如果我想可以实时调整单品数量呢,该怎么处理
    摇阿遥2017-08-18 16:31 回复