AxureRP8实战手册-案例17(中继器:商品列表排序)

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

案例17. 中继器:商品列表排序

案例来源:

美丽说-宝贝搜索

 

案例效果:

  • 默认:(图1-135)

1_135

  • 价格从低到高:(图1-136)

1_136

  • 价格从高到低:(图1-137)

1_137

 

案例描述:

鼠标移入“价格排序”按钮,显示选项列表。选项在鼠标进入时显示粉色文字,点击选项,商品列表进行相应的排序。

 

元件准备:

  • 页面中:(图1-138)

1_138

  • 动态面板“SortPanel”中: (图1-139)

1_139

  • 中继器“GoodsList”中:(图1-140)

1_140

  • 中继器“GoodsList”的数据集中:(图1-141)

1_141

包含命名:

  • 中继器(用于商品列表):GoodsList
  • 动态面板(用于排序选项):SortPanel
  • 图片(显示商品图片):GoodsImage
  • 图片(显示商品类型):GoodsTypeImage
  • 文本标签(显示商品名称):GoodsName
  • 文本标签(显示商品销量):GoodsSales
  • 文本标签(显示商品价格):GoodsPrice

 

思路分析:

  • 完成中继器数据集与元件的关联;(操作步骤1)
  • 并设定好模块的排布与间隔;(操作步骤2)
  • 鼠标移入“价格排序”按钮,需要显示排序的选项,并能够在鼠标移出选项时自动隐藏选项;(操作步骤3)
  • 为每个排序选项添加鼠标移入时的样式;(操作步骤4)
  • 点击每个排序选项时,需要中继器进行相应的排序,并隐藏排序的选项列表。(操作步骤5~6)

 

操作步骤:

1、为中继器的【每项加载时】事件添加“用例1”,设置商品的名称、价格、销量、图片和类型图标与模板中的元件关联;(参考图1-132)

  • 事件交互设置:(图1-142)

1_142

2、在中继器的样式中设置{布局}为【水平】布局,【网格排布】中设置【每排项目数】为“4”;(参考图1-134)

3、为“价格排序”按钮的【鼠标移入时】事件添加“用例1”,设置动作为【显示】动态面板“SortPanel”,在设置的{更多选项}中选择【弹出效果】;设置为“弹出效果”后,显示出来的动态面板就会在鼠标移出时自动隐藏,而无需再添加交互;

  • 用例动作设置:(图1-143)

1_143

4、在元件属性中为排序选项元件设置【鼠标悬停】的交互样式,文字颜色为粉红色;

 

5、双击动态面板“SortPanel”打开动态面板状态管理界面;再双击状态名称“State1”打开状态内容编辑区;在编辑区中为排序选项“价格从低到高”的【鼠标单击时】事件添加“用例1”,设置动作为【添加排序】到中继器“GoodsList”,排序{名称}为“SortPrice”,排序的{属性}为商品价格“GoodsPrice”,{排序类型}为数字类型“Number”,排序{顺序}选择【升序】排列;

  • 用例动作设置:(图1-144)

1_144

6、继续上一步添加动作【隐藏】动态面板“SortPanel”;

  • 用例动作设置:(图1-145)

1_145

7、参考操作步骤5~6,为排序选项“价格从高到低”的设置交互,不同之处只是排序交互中{顺序}为【降序】排列。

  • 事件交互设置:(图1-146)

1_146

补充说明:

本案例中使用了“FontAwesome4.4.0”图标字体元件库,需要安装字体文件支持,并进行Web字体设置。(参考案例1的补充说明)

特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例17(中继器:商品列表排序)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(16)个小伙伴在吐槽
  1. 楼老师素材下载地址在那里+
    黄瓜队长2016-06-25 15:53 回复
  2. 点击 价格从低到高 后并没有隐藏动态面板呢,老师求解答。 🙄
    Yvan2016-07-29 12:00 回复
    • 动态面板的动画用弹出效果
      122016-08-31 22:18 回复
    • 我也是,请问解决了吗?
      familyHu2016-12-24 09:36 回复
  3. 中继器的表格里比如数值是10元 20元 有没有办法在有单位文字的情况下 进行排序
    文心雕龙2016-09-20 11:15 回复
  4. 老师,这个案例把要讲的知识点讲到了,但是没有把动作做完整,单击完后,还有两个动作:页面刷新及“价格”二字变成了当前点击排序的文字“价格从低到高”或“价格从高到低”。
    Lucy2016-09-20 14:54 回复
    • 请问,当前点击的文字改变成“价格从低到高”或“价格从高到低”时,怎么改变文字的样式,变成粉色?
      familyHu2016-12-24 09:47 回复
  5. 老师,我有一个步奏怎么也不对,价格序列的动态面板在样式里隐藏了,然后设置鼠标移入时显示弹出效果, 但价格序列没能弹出来....求解答 😕
    wgj27912016-09-23 20:20 回复
  6. 是不是因为排序(升)之后,隐藏面板,但是鼠标仍在价格上,所以又会显示面板,看起来就是面板没有隐藏?
    dabing2016-09-27 09:31 回复
  7. 为什么鼠标移入价格排序的选项,动态面板没有弹出来呢
    cherry2016-11-14 09:48 回复
    • 正好相反,我是默认状态就会显示出动态面板。然后鼠标移入移出他才能正常显示。
      syx01252016-11-28 16:24 回复
  8. 小楼老师,请问怎样能实现选择了“价格从高到低”之后,价格也停留在“价格从高到低”,而不是返回“价格标签”
    加减乘除2017-05-18 15:13 回复
  9. 小楼老师,我做完预览的时候选择排序时没有显示出相应的内容,而是中继器编辑时候的默认状态,这是为什么?
    小儿gogogo2017-06-21 16:44 回复
    • 小楼一夜听春语
      用本站汉化包
      小楼一夜听春语2017-06-22 09:06 回复
      • 没啥变化呀,还是那样
        小儿gogogo2017-06-22 10:12 回复
  10. 小楼老师,这个中继器的商品列表做出来后,第二行图片的右侧跟第一行图片的右侧不对齐啊,是什么原因那?
    晚安好梦2017-10-28 15:21 回复