案例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列。

---------------------------------------------------- End ----------------------------------------------------

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

小楼老师倾力打造AxureRP7.0精品课程系列，独特的技术，淫荡的思路，销魂的声音，丰富的姿势，润滑的体验，超爽的感觉，想要？就从下面进入！

《AxureRP7.0从入门到精通》------从零向高手蜕变的必修课------<<想上它，插这里！>>