跳到主要内容

列表

用于展示可滚动的动态内容列表，常见于商品列表、内容资讯流、用户记录等场景。

何时使用​

  • 内容项数量不固定，可能较多时。
  • 需要支持分页加载或下拉触底加载。
  • 适用于移动端资源节省型展示。
  • 内容更新频繁、动态数据驱动的界面。

一、属性​

1. 数据源配置​

支持三种数据绑定方式：

  • 接口绑定
  • 数据绑定
  • 模型绑定

示意图：

数据源配置

2. 功能设置​

功能设置入口

1）启用栅格布局​

  • 可设定列数与行列间距。
  • 适用于卡片、图片等瀑布流式展示。

示意图：

栅格布局设置

2）每页记录数​

  • 控制每次加载的数据量。
  • 例如设置为 10，则每次加载 10 条记录。

3）底部距离（offset）​

  • 设置当滚动条与底部的距离小于指定值时，触发加载事件。
  • 适配无限滚动加载场景。

4）加载提示​

  • 控制加载过程中的提示文字或图标。

示意图：

加载提示示意1 加载提示示意2

5）完成提示​

  • 所有数据加载完成后显示的提示内容。
  • 可自定义提示文案。

示意图：

完成提示

6）错误提示​

  • 加载失败时的提示内容。

示意图：

错误提示

3. 状态​

无特殊状态设置，详见：通用状态

二、样式​

暂无特殊样式配置，详见：通用样式

三、常见使用场景​

1. 商品列表​

  • 电商类应用常见展示形式
  • 支持栅格样式与滑动分页加载

示意图：

商品列表

2. 文章资讯流​

  • 用于展示新闻、博客、内容流等信息列表

示意图：

资讯流

3. 用户足迹​

  • 展示用户浏览记录、点赞收藏历史等交互行为数据

示意图：

用户足迹