列表套列表

效果

当前效果依旧会展示完整产品,但是可以根据选择产品的分类,直接滚动到对应的产品分类下方。

数据模型

在这里产品分类和商品之间是一对多的关系。一个产品分类下会有多个商品。
这里为了防止我们修改数据库记录后,产品分类表的ID发生变化,不便于之后对应列表的索引。因此在数据模型中新增一个idx字段用户产品分类的排序。

选择视图

选择视图中显示的是所有产品的分类,因此需要将选择视图绑定「产品分类」表

  • step1. 选择数据源为「查询」,数据表为「category」,过滤条件为「无过滤条件」
  • step2. 选择字段为 idx ,默认值为 0

产品分类_列表

右侧的产品分类_列表中的内容会根据选择视图的选择滚动到对应的产品分类,且会在产品分类下方展示对应的分类下的商品。这就需要我们使用两个列表组件来实现。

  • 外层列表展示的是产品的分类;内容列表则是展示该分类下的商品。组件搭建方式如下图所示。
  • 外层列表的数据绑
  • 内层列表的数据绑定
    内层商品展示内容,为该项产品分类下的商品,因此对应的过滤条件为category_category等于该项的ID(外层列表为产品分类表,每一项的内容为产品的分类)

选择视图行为

既然点击选择产品的分类,右侧商品展示区将直接滚动到对应的产品分类并展示对应的内容。我们需要为选择视图的点击添加行为。
滚动的对象为产品分类_列表
索引指的是列表项的index,从 0 开始。我们为产品分类表新增的 idx 字段就是为了对应列表的index,也是从0开始,因此索引值我们可以直接赋值为 选择器/选择视图/idx。

操作步骤示范

文章知识点

行为

滚动到

需要更多帮助

未能解决您的问题?跳转社区进行话题讨论

2022-08-23
0 0