AxureRP8实战手册-案例19( 中继器:商品类型筛选)

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

 案例19. 中继器:商品类型筛选

案例来源:

美丽说-宝贝搜索

 

案例效果:

  • 筛选前:(图1-156)

1_156

  • 筛选后:(图1-157)

1_157

案例描述:

选中一个筛选条件后,将满足该条件的商品筛选出来。并且,多个筛选类型可以叠加。

 

元件准备:

  • 页面中:(图1-158)

1_158

包含命名:

  • 见案例16与案例17。

 

思路分析:

  • 如果需要实现按类型的筛选,就需要在中继器的数据集中存储不同类型的数据;根据案例效果,每一种类型都应该在数据集中有对应的一列类型数据,记录每个商品是否此种类型;在这里我们仅以前两种类型(“11新款狂欢节”与“秋冬新款”)为例,省略其它类似操作。(操作步骤1)
  • 在每一种类型的复选框被选中时,都要添加该种类型的筛选;(操作步骤2)
  • 同理,在每一种类型的复选框取消选中时,也要相应的取消筛选;(操作步骤3)
  • 做好一个复选框的交互后,其它复选框也要相应的进行设置。(操作步骤4)

 

 

操作步骤:

1、先在数据集中添加2列数据,列名分别是“Promotion”与“NewStyle”,表示促销与新款的数据列;具有属性的商品列值为“True”,不具有属性的商品列值为“False”;(图1-159)

1_159

2、根据案例17,我们知道底层的复选框会被进行选中状态的切换;那么,我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”,设置动作【添加筛选】到中继器“GoodsList”;配置中不勾选【移除其它筛选】的选项,确保能够多条件筛选;筛选{名称}为“FilterPromotion”;筛选{条件}为“[[Item. Promotion==’True’]]”;

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

1_160

3、继续上一步,在该元件底层复选框的【取消选中时】事件中添加“用例1”,设置动作为【移除筛选】中继器“GoodsList”,{被移除的筛选名称}中填写上一步的筛选名称“FilterPromotion”;

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

1_161

4、参考操作步骤2~3,为“秋冬新款”的底层复选框添加交互,不同的是筛选名称为“FilterNewStyle”,筛选条件为“[[Item. NewStyle==’True’]]”。

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

1_162

补充说明:

  • 这个案例中,商品 “双11活动”的优先级最高,当同时具备“双11活动”与“秋冬新款”属性时,优先显示“双11活动”的图标,所以筛选后的效果图中不完全是“秋冬新款”的图标。
  • 注意本案例条件表达式中“True”要用英文半角的单引号括起来(数字无需这样处理);
  • 本案例中与网站实际内容略有不同;网站中第5列商品为推广商品,与商品列表并非统一列表;本案例中,为了排列美观,将商品列表调整为5列。

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


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

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

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

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


转载请注明:Axure原创教程网 » AxureRP8实战手册-案例19( 中继器:商品类型筛选)

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

表情

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(10)个小伙伴在吐槽
  1. 这个是哪个版本?
    杰小2016-06-30 12:07 回复
  2. 没做出来,点击之后列表没了
    波波2016-10-14 13:55 回复
    • 注意引号格式
      小伙伴2016-10-24 14:12 回复
  3. 按照上面的做了,可是预览时选择多个复选框后,列表内容不显示
    迷糊娃娃2016-11-29 17:41 回复
  4. 狂魔
    趴趴2017-03-09 18:22 回复
  5. 引号是英文半角的 点击之后列表还是没了
    小熊2017-04-24 11:01 回复
  6. 没用啊,筛选之后全没了。
    WLW2017-05-10 10:41 回复
  7. 哔了狗,为何我的axure没有取消选中,只有个未选中时时间。。
    被坑了2017-06-21 15:06 回复
    • 小楼一夜听春语
      用本站汉化包
      小楼一夜听春语2017-06-22 09:06 回复
  8. 同问,按照案例上的操作操作了,勾选上之后,列表没内容了@小楼老师
    被坑了2017-06-22 14:20 回复