湖南论坛网

搜索

中继器使用场景(一)

[复制链接]
honghu 发表于 2021-9-25 03:08:48 | 显示全部楼层 |阅读模式
honghu 2021-9-25 03:08:48 321 0 显示全部楼层
中继器使用场景(一)
本文适合已经掌握axure元件属性,中继器属性、中继器制作、中继器元件与数据集关系的同学参考。



最近自己在做中粮我买网的高保真原型,截取了一段购物车中的场景——同一商品,在重复点击购物车图标时,在购物车页面,只做实时数量变化,而不会重复添加条目。

gif图演示:



为了效果的直观性,gif图将“商品列表”(左侧)和“购物车界面”(右侧)放在同一平面上,让大家看到变化。

为了文章简化,仅讲解“购物清单,重复添加同一商品,实时数量变化”这一部分的实现方法。
思路:
当在产品列表页,看到商品时,第一次点击购物车图标,在购物车页面中添加一行数据,显示所选购的商品。

当重复点击同一商品的购物车标志时,在购物车页面,要更新该商品行的数据,更新数量文本的数字,不会重复添加条目。
实现步骤1. 准备两个中继器
(1)第一个中继器:商品列表中继器结构



中继器数据载入时元件及数据项目绑定如下:



这里重点说两点:

重点一:商品图片在img列中的表现方式

常规做法是,在img列中右键选择“导入图片”,然后选择图片,插入图片。

这种做法的问题是,图片无法在两个元件之间传递,比如:在点击购物车图标时,在“购物车页面中继器中枕头交友”显示该商品的图片,用“添加行”命令时,即便设置“购物车页面中继器”中的img==“商品列表中继器”中的img,但是在实际生成时,并不能看到对应图片。

技巧:先将所需的图片都统一放在一个页面中,然后生成预览一下,在浏览器中(谷歌、360均可)右键选择复制图片地址,然后将该地址粘贴在img列表项中即可。这样,在两个中继器中传递图片就可以了。

操作过程如下:



重点二:shuliang列表项

在中继器的数据表中,有shuliang一项,这一项在视图中不做加载,即不和任何元件关联,只是作为判断项存在。初始数据为0,是为了日后分辨点击购物车列表的行为的,第一次点击,该数值为1,两次点击即为2,以此类推(实现办法下文有介绍)。



第二个中继器:购物车列表中继器结构



中继器数据载入时元件及数据项目绑定如下:



重点:“购买数量”的那个文本框,截图中为“shuliang”,加载时要绑定item.shuliang列。
2. 添加交互
在第一个商品列表中继器(截图中名字为goods list)里的购物车图标中,添加交互。



Case1:

(if true)即无条件的,首要执行的动作,接下来更新本行数据。

更新行的交互截图:



解释:在点击购物车图标时,首先要更新本行数据(商品列表中继器)的shuliang列,更新为[[Item.shuliang+1]],即每点击一次购物车图标,shuliang列就+1。

Case2:

(if “[[Item.shuliang]]” == “1”)即如果shuliang列为1,即只点击了购物车图标一次。接下来为购物车中继器(截图中为名字为shopping)“添加行”。

截图如下:



两个中继器之间的数据对应各个列,分别绑定,尤其是shuliang列,两个中继器中的shuliang列数据一致。即点击一次购物车图标时,商品列表中继器中的shuliang为1,购物车中继器中的shuliang也是1。因为购物车中继器的“购买数量文本框”shu脊美下载网liang在每项加载中和数据集的shuliang列绑定,所以此时该文本框显示为1。

Case3

(Else 附近约爱if “[[Item.shuliang]]” > “1”即多次点击了购物车图标。接下来为购物车中继器(截图中为名字为shopping)“更新行”。

截图如下:



更新行条件:[[Item.name==TargetItem.name]] 即找到已经添加过的商品条目

更新列:shuliang

更新为:item.shuliang即找到已经添加过的商品条目,仅更新shuliang列数量,因该列给购买数量文本框(shuliang)赋值,所以在演示时,就能看到数量文本框不断增加数量。

本文由 @bobowang 原创发布于人人都是产品经理。未经许可,禁止转载

题图来自Unsplash,基于CC0协议

本链接由肥猫SEO论坛提供SEO优化技术支持。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 返回列表 发新帖

honghu当前离线
论坛会员

查看:321 | 回复:0

快速回复 返回顶部 返回列表