首页 >> 牛刀云小程序开发教程 >> 第1篇 制作模式 >> 页面制作 >> 内容组件

4.5.8 动态列表

在应用中展现多条数据一般都是使用列表展现的方法，动态列表组件可以提供纵向列表，横向列表和嵌套列表等多种显示方式，如图4-5-11所示。动态列表组件是必须绑定一个数据集的，在动态列表中要添加图片、文本等组件，才能显示出绑定数据集中的数据。

图4-5-11  列表组件

1、基础属性

动态列表组件提供5个基础属性：

l  绑定数据集：动态列表关联数据集后，在不设置过滤条件的情况下，可以展示数据集中的全部数据

l  过滤条件：设置数据集中的数据是否在动态列表中显示，过滤条件返回是表示显示，返回否表示不显示

l  下拉刷新：当用户在屏幕上下拉时，是否刷新数据

l  上拉触底翻页：当用户在屏幕上上拉触底时，是否加载下一页数据

l  模拟数据条数：设计时显示出列表效果，不需要显示时，可以设置为0

 

2、事件

动态列表组件提供2个事件：单击事件和长按事件。动态列表中添加其它组件后，在这些组件上单击或长按，都会触发动态列表组件的相应事件。

 

3、示例

示例一：纵向列表

纵向列表是最常见的列表形式，因此动态列表默认就是纵向列表。根据表4-9中的说明制作纵向列表。

表4-9  纵向列表组件说明

 

纵向列表不仅可以在一行中显示一条数据，也可以在一行中显示多条数据。关键在于设置动态列表的“宽度”和“是否可见”这两个属性。如果一行显示两条数据，即显示两张图片，就将“宽度”设置为50%，如果显示三条数据，就设置为33%。“是否可见”属性必须设置为inline-block。

 

示例二：横向列表

横向列表的实现是通过滚动视图和动态列表相结合，将动态列表添加到一个滚动视图中，就很容易实现横向列表。根据表4-10中的说明制作横向列表。

表4-10  横向列表组件说明

 

示例三：嵌套列表

嵌套列表的实现是通过在一个动态列表中再添加一个动态列表，从结构上实现嵌套。再设置内嵌动态列表的“过滤条件”属性，从数据上实现过滤，就很容易实现嵌套列表。根据表4-11中的说明制作嵌套列表。

表4-11  嵌套列表组件说明

在内嵌动态列表的“过滤条件”属性中设置：动态列表当前行1.订单=动态列表当前行.主键，其中动态列表当前行1.订单就是订单详情数据集的订单列，是订单详情数据集的外键列，等于订单数据集的主键。动态列表当前行.主键就是订单数据集的主键。因此过滤条件就是将两个数据集中相同的列关联起来。可以这样理解，动态列表是一行一行渲染的，渲染每个订单时，只能显示这个订单中的商品，而不能显示其它订单中的商品，因此需要使用订单详情数据集的订单列等于订单数据集的主键列作为过滤条件。