Axure学习笔记整理7-中继器-商品列表及排序

中继器使用案例：

1.打开Axure，拖拽一个中继器命名为‘GoodsList’，双击中继器进去填充内容，如以下截图：

里面部件分别命名为：图片部件-GoodsImage；文本标签部件-商品名称-命名为Name；文本标签部件-推荐-命名为Rec；文本标签部件-数量-命名为Sales；文本标签部件-价格-命名为Price；

 

2.打开excel表格填充一些业务数据，例如以下：

Name	Rec	Sales	Price	GoodsImage
电脑	112	12	1,230.00
模型	1116	56	345.00
家装	3335	44	33,333.00
房子	333	45	3,345,678.00

 

3.复制excel表格的数据后回到Axure，双击中继器GoodsList进去，拖到右下角可以看到中继器数据集，打开数据集后，点击数据集的首行首列，ctr+V将之前复制的数据粘贴到数据集中；最右边的列还没有图片，可选中数据集中的空格单击鼠标右键-’导入图片‘，选择你之前下载在电脑的图片即可；

 

4.添加交互用例：每项加载时-设置文本-勾选中继器里的Price-值-fx-￥[[Item.Price]]；依次对其他文本标签进行同样操作：勾选中继器里的Sales-值-fx-已售[[Item.Sales]]份；勾选中继器里的Rec-值-fx-[[Item.Rec]]人推荐；勾选中继器里的Name-值-fx[[Item.Name]]；然后左侧选择’设置图片‘-勾选GoodsImage-值-fx-[[Item.GoodsImage]]。

5.用例设置好确认后，回到检视页面打开样式设置：设置布局为’水平‘、’网格排布‘、’每排项目数2‘、行距为5，列距为5；

可点击预览效果了。

注：从excel复制数据到数据集可能会出现一行空格行，可点击删除行即可。

最后预览结果：有空的可以好好调节下文字大小颜色和其他布局间距等。

 

商品列表排序：

1.在上面已完成的商品列表页面中加入以下部件，其中动态面板可设为隐藏并置于底层；

2.鼠标选中‘价格排序’文本框做交互用例：鼠标移入时-显示‘动态面板sortpanel‘-弹出效果；

 

3.双击动态面板sortpanel进入state1，拖拽两个文本标签分别填充文字‘价格从低到高’、‘价格从高到低’；然后分别对这两个文本标签做交互样式设置-鼠标悬停-选择字体颜色为粉红色；

4.选择‘价格从低到高’文本标签做交互用例-鼠标单击时-添加排序-勾选中继器‘GoodsList’-属性为Price、排序类型为Number、顺序为升序；并同时设置隐藏-动态面板sortpanel；

 

5.对另一个文本标签‘价格从低到高’做同样的交互用例，顺序要改为降序。完成。