---
order: 2
navTitle: 列表
---
# SuperPage组件-移动列表

移动列表组件用于在移动布局中展示多行数据，配合输入组件（如下拉框、日期框）可实现动态查询过滤数据。

![移动列表示例](./images/mobilelist.gif)

## 使用移动列表组件{#start}

使用移动列表组件主要进行两个设置：

- 绑定要显示的数据集
- 设置要显示的字段

下面以显示企业基本信息的列表为例，介绍具体的操作步骤：

![使用组件](./images/mobilelist1.gif)

- **拖入列表组件**：在**组件区**>**移动**分组下将**列表**组件拖入到画布中
- **设置移动列表数据**：在**属性栏**>**移动列表**>**数据**中引用`企业基本信息`，列表划分了几个显示区块，包括**标题字段**、**时间字段**、**状态字段**、**数量字段**等，可以按需设置，见[列表设置](#field-setting)
- **设置显示更多字段**：除了列表数据显示的字段外，可以通过**添加更多字段**的方式，添加更多的显示内容
- **设置列表样式**：在**属性栏**>**样式**>**列表**下可设置每个字段的风格

## 列表设置{#field-setting}

在**属性栏**>**移动列表**>**数据**中可配置列表中显示的字段信息：

![列表设置](./images/pptx-images-mobilelist.png)

- **标题字段**：显示在最上面内容，一般为为主键对应的文字字段，如【企业名称】
- **时间字段**：表示这个数据的时间状态，显示在标题右侧
- **状态字段**：显示在标题下方一行，可以是选择多个字段并排显示，表示这个数据的状态，比如“正常”、“停业”、“加急”，可以是一个[多值](../../../../data-gov/model/field-role.md#values)维键
- **数量字段**：一般为度量，用于显示某个指标值，如【注册资本】
- **图标字段**：如果显示图标，可以设置图标字段，显示在标题左侧
- **更多字段**：勾选**显示更多字段**后可添加更多字段，输入标题并选取对应字段即可。可添加多个字段，显示在标题及状态字段下方，一个字段一行

## 列字段的样式设置{#field-style}

在**属性栏**>**样式**>**列表**下可以设置列表中[显示字段](#field-setting)的风格，当需要标注特殊值时，可**配置特殊状态样式**，如**企业状态**的值为**存续**时，显示为`标题2`的样式，**在业**时显示为`标题3`的样式：

![样式设置](./images/2020-12-29-16-05-28.png)

:::tip
每个字段下拉的样式共用的是[单行文本](../common/text.md)的样式，如果需要增加，需要在单行文本的样式中进行管理。
:::

## 列表的交互设置{#list-action}

在**属性栏**>**移动列表**>**高级**下可设置列表的交互操作，可实现数据的下拉刷新数据、上拉加载数据等效果：

![交互设置](./images/2020-12-29-16-06-49.png)

- **显示箭头**：勾选后，会显示一个向右的箭头，当点击列表可以打开链接钻取查询详细信息时可以勾选显示箭头
- **显示勾选框**：勾选后，在列表左侧会显示一个勾选框，一般搭配[交互](../../design/action/README.md)动作使用，如删除数据
- **下拉刷新**：当在列表顶部时，下拉列表可刷新数据
- **上拉加载**：当列表滚动到页面底部时，上拉列表可加载更多数据

### 操作按钮设置{#setting-button}

可添加列表操作按钮，勾选**显示操作按钮**后点击**配置操作按钮**在弹出的配置对话框中可添加：

![操作按钮](./images/2020-12-29-16-08-59.png)

选中添加的按钮，在设置操作按钮对话框的右侧，可以设置该按钮的内容和交互。具体属性内容如下：

- **内容**：设置按钮的显示标题
- **显示位置**：设置按钮在列表上的显示位置，可选**右边**、**右下角**、**侧滑**，当为**侧滑**时可输入**确认标题**，如侧滑删除数据，滑动后显示**确定删除此条数据吗？**，点击确认标题后即可删除数据
- **按钮风格**：下拉选择按钮的样式，共用的是[按钮](../common/button.md)组件的样式，如果需要增加，需要在[按钮](../common/button.md)的样式中进行管理
- **图标前缀**：给按钮添加图标前缀，可设置图标的颜色及大小等
- **显示**：设置该按钮在满足一定条件时是否显示，可使用[表达式](../../../../exp/README.md)
- **禁用**：设置该按钮在满足一定条件时是否启用发生交互，可使用[表达式](../../../../exp/README.md)
- **交互**：设置对应按钮可触发的交互动作，可参考文档[交互](../../design/action/README.md)

### 搜索框{#searchbox}

勾选**显示搜索框**后会在列表上方出现一个搜索框:

![搜索框](./images/2020-12-29-16-10-12.png)

- **占位符**：即搜索框内容为空时默认显示在搜索框内的信息
- **搜索字段**：对列表数据搜索的内容设置，可对允许搜索的字段进行关键字搜索，符合条件的内容会高亮显示

## 列表样式设置{#style}

在**属性栏**>**样式**下可设置列表和数据行的样式：

![列表样式](./images/2020-12-29-16-11-41.png)

- **列表**：包括填充、内边距、外边距、[字段列表风格](#field-style)
- **数据行**：包括填充、边框、圆角、内边距等