Axure RP9 商品列表排序

首先看一下完整的效果图


屏幕快照 2019-06-11 17.33.25.png

布局:[流行][上新]:文本标签、[价格从低到高]:动态面板、[商品列表]:中继器
添加商品模板


屏幕快照 2019-06-11 17.39.46.png

为中继器添加数据
屏幕快照 2019-06-11 17.40.46.png

设置间距和布局


屏幕快照 2019-06-11 17.41.28.png

为【价格排序】按钮的【鼠标移入时】设置【显示】动态面板“SortPanel”,在设置【更多选项】中选择【弹出效果】。设置为“弹出效果”后,显示出来的动态面板就会在鼠标移出时自动隐藏。
屏幕快照 2019-06-11 17.45.13.png

"价格从低到高"/"价格从高到低"设置【鼠标悬停】的交互式样,文字原色为粉色
屏幕快照 2019-06-11 17.47.04.png

双击动态面板“SortPanel”,为排序选项“价格从低到高”的【鼠标单击时】设置【添加排序】到中继器GoodsList,排序名称为“GoodsPrice”,排序类型为“Number”,排序顺序选择【升序】。
屏幕快照 2019-06-11 17.49.03.png

“价格从高到低”一样的设置。

你可能感兴趣的:(Axure RP9 商品列表排序)