中继器：商品列表排序

案例描述：
鼠标移入“价格排序”按钮，显示选项列表。选项在鼠标进入时显示粉色文字，点击选项，商品列表进行相应的排序。
思路分析：
①完成中继器数据集与元件的关联；
②并设定好模块的排布与间隔；
③鼠标移入“价格排序”按钮，需要显示排序的选项，并能够在鼠标移出选项时自动隐藏选项；
④为每个排序选项添加鼠标移入时的样式；
⑤点击每个排序选项时，需要中继器进行相应的排序，并隐藏排序的选项列表。

1.元件准备


拖入中继器——打开编辑区域编辑

2.中继器“GoodsList”的数据集中

包含命名：
中继器（用于商品列表）：GoodsList
动态面板（用于排序选项）：SortPanel
图片（显示商品图片）：GoodsImage
图片（显示商品类型）：GoodsTypeImage
文本标签（显示商品名称）：GoodsName
文本标签（显示商品销量）：GoodsSales
文本标签（显示商品价格）：GoodsPrice
3.为中继器的【每项加载时】事件添加“用例1”，设置商品的名称、价格、销量、图片和类型图标与模板中的元件关联



4.在中继器的样式中设置{布局}为【水平】布局，【网格排布】中设置【每排项目数】为“3”

5.为“价