【Axure交互教程】购物车结算效果

作品名称：滑动拼图验证登录效果

作品编号：Case010

软件版本：Axure9

作品类型：交互案例

今天我们制作的是移动端的购物车结算效果，主要涉及的是中继器的使用，全选以及数量的计算。

原型预览链接（附源文件下载链接）：http://daisyaxure.com/demo/Case010

效果预览：

一、中继器数据绑定

准本元件

1.拖入一个中继器元件，命名为「商品列表」，样式列表中设置布局为垂直，间距为10，填充数据如下：

2.双击进入中继器，拖入下图中的所有元件，右键将所有元件设为组合，命名为「商品卡片」；商品小计作为计数的辅助元件，右键设置为不可见。

添加交互

给中继器「商品列表」添加【项目载入时】的交互，将「商品卡片」中的元件与样式面板中的数据集进行绑定。

1.添加动作，选择【设置文本】，目标「商品名称」设置为【文本】变量值为【[[Item.ProductName]]】；

3.继续添加动作，选择【设置图片】，目标「商品图片」设置default图片为【值】【[[Item.Picture]]】