【转】AxureRP8实战手册-案例19( 中继器:商品类型筛选)
作者:互联网
AxureRP8实战手册-案例19( 中继器:商品类型筛选)
AxureRP8.0教程 小楼一夜听春语 4年前 (2016-06-27) 16197℃ 0评论案例19. 中继器:商品类型筛选
案例来源:
美丽说-宝贝搜索
案例效果:
- 筛选前:(图1-156)
- 筛选后:(图1-157)
案例描述:
选中一个筛选条件后,将满足该条件的商品筛选出来。并且,多个筛选类型可以叠加。
元件准备:
- 页面中:(图1-158)
包含命名:
- 见案例16与案例17。
思路分析:
- 如果需要实现按类型的筛选,就需要在中继器的数据集中存储不同类型的数据;根据案例效果,每一种类型都应该在数据集中有对应的一列类型数据,记录每个商品是否此种类型;在这里我们仅以前两种类型(“11新款狂欢节”与“秋冬新款”)为例,省略其它类似操作。(操作步骤1)
- 在每一种类型的复选框被选中时,都要添加该种类型的筛选;(操作步骤2)
- 同理,在每一种类型的复选框取消选中时,也要相应的取消筛选;(操作步骤3)
- 做好一个复选框的交互后,其它复选框也要相应的进行设置。(操作步骤4)
操作步骤:
1、先在数据集中添加2列数据,列名分别是“Promotion”与“NewStyle”,表示促销与新款的数据列;具有属性的商品列值为“True”,不具有属性的商品列值为“False”;(图1-159)
2、根据案例17,我们知道底层的复选框会被进行选中状态的切换;那么,我们在“11新款狂欢节”底层复选框的【选中时】事件中添加“用例1”,设置动作【添加筛选】到中继器“GoodsList”;配置中不勾选【移除其它筛选】的选项,确保能够多条件筛选;筛选{名称}为“FilterPromotion”;筛选{条件}为“[[Item. Promotion==’True’]]”;
- 用例动作设置:(图1-160)
3、继续上一步,在该元件底层复选框的【取消选中时】事件中添加“用例1”,设置动作为【移除筛选】中继器“GoodsList”,{被移除的筛选名称}中填写上一步的筛选名称“FilterPromotion”;
- 用例动作设置:(图1-161)
4、参考操作步骤2~3,为“秋冬新款”的底层复选框添加交互,不同的是筛选名称为“FilterNewStyle”,筛选条件为“[[Item. NewStyle==’True’]]”。
- 事件交互设置:(图1-162)
补充说明:
- 这个案例中,商品 “双11活动”的优先级最高,当同时具备“双11活动”与“秋冬新款”属性时,优先显示“双11活动”的图标,所以筛选后的效果图中不完全是“秋冬新款”的图标。
- 注意本案例条件表达式中“True”要用英文半角的单引号括起来(数字无需这样处理);
- 本案例中与网站实际内容略有不同;网站中第5列商品为推广商品,与商品列表并非统一列表;本案例中,为了排列美观,将商品列表调整为5列。
特别提醒:本教程相关素材请到导航菜单中的【在线阅读】页面中进行下载。
转载请注明:Axure原创教程网 » AxureRP8实战手册-案例19( 中继器:商品类型筛选)
标签:AxureRP8,19,中继器,复选框,案例,类型,筛选,操作步骤 来源: https://www.cnblogs.com/sikongluoxing/p/12800184.html