移动端列表类组件

移动端提供垂直列表、水平列表、瀑布流、滚动列表（下拉刷新、上滑加载更多）、宫格、分类列表（索引导航、分类导航）、步骤条、标签页、侧边导航、单选行、多选行、表格、冻结列、简单树等列表形式，界面效果如下面几张图所示

• 垂直列表

• 水平列表（横向滚动）

• 瀑布流

• 滚动列表（下拉刷新、上滑加载更多）

• 宫格

• 分类列表-索引导航

• 分类列表-侧边导航

• 步骤条

• 标签页

• 侧边导航

• 单选行

• 多选行

• 表格（Vantui支持，Vant不支持）

• 简单树

列表（vant）动态列表（vantui）

列表组件是列表页面中最常用的组件，和数据组件绑定后，显示数据组件中的数据，并实现双向数据绑定。

• 写入数据：用户录入，或通过代码赋值后，数据会写入数据组件
• 读取数据：列表组件实时显示数据组件中的数据，数据改变后，会立即显示新的数据

列表组件通过设置“绑定数据集”属性绑定到一个数据组件上，实现双向数据绑定。在动态列表模板中可以放任意组件，当组件需要设置“绑定数据列”时，必须设置“列表当前行”的数据列

• 放表单类组件，表单类组件的“绑定数据列”绑定“列表当前行”的数据列，在列表中可以直接编辑数据
• 放图片组件，图片的“地址”属性绑定“列表当前行”的数据列，可以显示图片
• 放按钮组件，按钮的“文本”属性绑定“列表当前行”的数据列，可显示为一个带链接的按钮

特别说明

• 动态列表的方向属性（如下图所示）只在动态列表模版中包括多个子节点时生效
  • 方向设置为垂直，列表显示为垂直报表
  • 方向设置为水平，列表显示为水平报表
• 动态列表模板中只有一个子节点时，由子节点的 display 属性决定列表的显示
  • 子节点 display=block，列表显示为垂直列表
  • 子节点 display=inline-block，列表显示为水平列表

垂直列表

当动态列表模板中包括多个子节点，且“方向”属性设置为“垂直”时，系统自动增加一个 div 节点，用于实现行级元素效果。

本例动态列表模板中只有一个子节点，列表的显示由这个子节点的 display 属性决定。行列组件的 display 属性是 block，列表会显示为垂直列表，设计时组件结构如下图所示

运行效果如下图所示

水平列表（流式布局）

当动态列表模板中包括多个子节点，且“方向”属性设置为“水平”时，系统自动增加一个 span 节点，用于实现行内元素效果。

本例动态列表模板中只有一个子节点，列表的显示由这个子节点的 display 属性决定。本例使用视图，使用 css 设置视图为行内元素，如下图所示

运行效果如下图所示

水平列表（横向滚动）

实现横向滚动的水平列表，是在流式布局的水平列表外，放一个视图组件 view，如下图所示

设置外层视图组件的样式为：“不换行”且“显示滚动条”，完整源码如下：

<vantui:View id="view1" style="overflow: auto;white-space: nowrap;" >
    <vantui:List bind:items="restData1.value" id="list1" item="item1" >
        <attr:contentRender id="default1" >
            <vantui:View id="view0" style="display:inline-block;text-align:center;padding:0.744rem;" >
                <vantui:Image id="image1" src="{$row.images}" style="width:2.5rem;height:2.5rem" >[/vantui:Image](/vantui:Image)
                <vantui:Text id="text3" style="display:block;" text="{$row.name}" >
                [/vantui:Text](/vantui:Text)
            [/vantui:View](/vantui:View)
        [/attr:contentRender](/attr:contentRender)
    [/vantui:List](/vantui:List)
[/vantui:View](/vantui:View)

运行效果如下图所示

vantui 滚动列表

滚动列表组件适用于在触屏设备上浏览大量数据，该组件提供下拉刷新、上滑加载更多功能。用“滚动列表”组件替代“动态列表”组件实现滚动分页加载的效果。运行效果如下图所示

特别说明

• 如果在一个父节点中没有出现滚动效果，给父节点添加样式 overflow:auto;，即可实现局部滚动
• 在面板底部放标签栏组件，滚动列表不显示最后的“没有更多了~”，出现这种情况是因为标签栏组件的 position 样式默认是固定 fixed，没有高度，不能撑开面板底部，导致滚动列表的高度比实际看到的大，将标签栏组件的 position 样式改为相对 relation 即可

vantui 瀑布流

瀑布流是一种常见的网站页面布局形式，其特点是多栏布局，各栏的高度参差不齐。运行效果如下图所示

使用“瀑布流”组件代替“动态列表”组件，实现多栏且错落有致的视觉效果。瀑布流组件提供列数、水平间距、垂直间距等属性。在瀑布流组件外层放“滚动列表”组件（去掉滚动列表模板）即可实现瀑布流的滚动分页加载效果，设计界面如下图所示

宫格

宫格可以在水平方向上把页面分隔成等宽度的区块，用于展示内容或进行页面导航。支持设置静态内容和绑定数据组件实现动态扩展。宫格组件的点击项事件只在使用绑定数据组件实现动态扩展时才会触发。

• 静态内容

例如，作为按钮使用，运行效果如下图所示

宫格组件设置列数为3，点击反馈为是

每个宫格项设置文字、图标、点击事件

• 动态内容

宫格内部默认显示图标、文本、徽章（信息），通过“绑定列”属性设置，如下图所示

运行效果如下图所示

宫格组件也支持定制宫格项（注意不是添加宫格项，是定制宫格项，设置“选择数据集”属性后，显示出“定制宫格项”按钮）。在定制的宫格项中可以添加任意组件，注意组件的绑定数据列要选择宫格当前行的数据，设计界面如下图所示

运行效果如下图所示

分类列表

分类列表组件用于显示带有分类信息的数据，支持通过点击分类快速定位，支持两种分类显示模式

• 索引导航：在页面右侧显示分类列表，运行效果如左下图
• 侧边导航：在页面左侧显示分类列表，运行效果如右下图

分类列表支持两种数据格式：普通数据和嵌套数据（vant 不支持）。数据格式不同，分类列表组件的属性设置也不同。

索引导航-普通数据

普通数据是最常用的数据，数据中有一列是分类列，例如通讯录数据 contact 中，首字母列 letter 就是分类列，数据格式如下图所示

通讯录数据集的数据结构，如下图所示

分类列表组件使用普通数据时，设置“绑定数据集”属性和“分类列”属性即可。本例使用索引导航，分类模式选择“索引导航”，如下图所示

本例适合用单元格展示列表项，因此定制列表项渲染函数，使用插入组件的方式，插入单元格组件。设置单元格组件的标题、内容、左侧图标，如下图所示，本例为了显示彩色图标，因此定制了左侧图标

列表项中的数据这样获取：双击选择“列表项渲染函数”中的列表项，在后面加上 .列名，例如获取通讯录中的姓名列的写法为 列表项.name，如下图所示

侧边导航-普通数据

数据中如果只有分类 id，没有分类名称，可以使用数据组件的关联查询，查询出分类名称后，设置方法同上面的例子。例如：商品表只存储了分类 id，设置关联查询，关联商品分类表，查询出分类名称，如下图所示

分类列表组件使用普通数据时，设置“绑定数据集”属性和“分类列”属性即可。本例使用侧边导航，分类模式选择“侧边导航”，如下图所示

本例适合用商品卡片展示列表项，因此定制列表项渲染函数，使用插入组件的方式，插入商品卡片组件。设置商品卡片组件的标题、图片、价格，如下图所示

列表项中的数据这样获取：双击选择“列表项渲染函数”中的列表项，在后面加上 .列名，例如获取商品中的名称列的写法为 列表项.name，如下图所示

嵌套数据（vantui 支持）

vantui 除了可以使用普通数据，也支持使用嵌套数据，JSON 嵌套数据，数据格式如下图所示，商品分类数据 category 中有3列数据：fid、name、product。其中 product 里面是该分类下的商品数据

在商品分类数据集中添加输出数据集，可在前端获得 JSON 嵌套数据

输出数据集中选择商品数据集，在字段映射中，添加两个数据集的关联关系，例如：商品数据集的分类 id = 商品分类的 id，设置界面如下图所示

数据组件默认不查询输出数据集，在数据列中勾选后，才会返回输出数据集。在商品分类数据组件的数据列中，选择主键、分类名称和商品数据集，就会返回 fid、name、product 这些数据，设置界面如下图所示

分类列表组件使用嵌套数据时，设置“绑定数据集”属性和“列表内容列”属性即可。本例使用侧边导航，分类模式选择“侧边导航”，如下图所示。设计器中不显示“列表内容列”属性，先设置“分类列”属性，然后在源码中，将 categoryColumnName 改为 childrenColumnName 即可。

<vantui:CategoryList bind:items="restData0.value" childrenColumnName="product" id="categoryList0">

本例适合用商品卡片展示列表项，因此定制列表项渲染函数，使用插入组件的方式，插入商品卡片组件。设置商品卡片组件的标题、图片、价格，如下图所示

列表项中的数据这样获取：双击选择“列表项渲染函数”中的列表项，在后面加上 .列名，例如获取商品中的名称列的写法为 列表项.name，如下图所示

步骤条

步骤条组件提供水平步骤条和垂直步骤条两种效果，如下图所示

步骤条组件绑定一个数据集，将这个数据集中的一条条数据显示为一个个步骤，本例的数据如下图所示

在步骤条组件的“属性绑定列”属性中设置：文本列、描述列、非激活图标列（可选，未设置显示一个圆点）、激活图标列（可选，未设置显示一个对勾）对应的数据列，如下图所示。当前步骤属性用于设置当前步骤，从0开始

标签页

标签页组件即选项卡组件，用于在不同的内容区域之间进行切换，运行效果如下图所示

标签页组件支持静态标签页和动态标签页。通过“添加项”添加静态标签页，通过“设置动态列表”添加动态标签页。

静态标签页

标签页组件的标签和标签内容区（下图中选中的“页签”）是一一对应的，在页签中通过“标题”属性设置标签名称，在页签中直接放组件形成标签内容。

动态标签页

动态标签页通常用作过滤条件，切换时根据激活的标签，展示不同的数据。动态标签页的使用方法是：

• 在页签上设置标签页的标题、标识符等属性
• 页签中不放组件，在标签页组件下面放组件

本例上面用标签页显示商品分类，下面用表格显示商品，设计界面如下图所示

在标签页组件的“改变”事件中，react 使用 event.detail.name 获得当前激活页签的标识符，vue 使用 event.name 获得当前激活页签的标识符。本例用作商品数据的过滤条件，如下图所示

react 选择“改变-标识符”即 event.detail.name

vue 选择“上下文变量-name”即 event.name

粘性布局

标签页组件支持粘性布局，即当页面向下滚动时，标签页不向上滚动，一直显示在页头。设置“粘性”属性为“是”即可。

禁用页签

每个页签支持设置为禁用，设置页签的“禁用”属性即可

侧边导航

侧边导航组件是垂直展示的导航栏，用于在不同的内容区域之间进行切换，运行效果如下图所示

侧边导航组件支持静态导航项和动态导航项。通过“添加项”添加静态导航项，通过“设置动态列表”添加动态导航项。

侧边导航组件只包括导航列表，不包括右侧的内容区，可以使用行列组件将页面分成左右两个区域，左边放侧边导航组件，右边放其它组件。

本例左侧用侧边导航组件展示商品分类，右侧用动态列表组件展示商品。设计界面如下图所示

“默认激活项”属性填写导航项的索引值（第一个是0）。在“改变”事件中，通过 event.detail 获得当前激活项的索引值，JS 代码如下

onSidebar0Change = (event) => {
    //获取商品分类的JSON数据
    let categorys = this.comp("categoryData").toJson();
    //获取激活项对应的数据
    this.comp("pageData").setValue("selectCategory", categorys[event.detail].fid);
    //刷新商品表
    this.comp("productData").refreshData();
}

vantui 表格

Vantui 表格组件支持固定列、列头排序、设置列内容对齐方式、表头粘性布局、定制列内容、设置数据为空时的占位字符（默认--）等功能，运行效果如下图所示

表格组件通过设置“绑定数据集”属性绑定到一个数据组件上，实现双向数据绑定。通过“设置列”设置表格中的显示列，表格组件属性设置如下图所示

表格列的属性设置，如下图所示

单选行

在列表组件和表格组件中都可以实现单选，使用“多选框”组件实现，运行效果如下图所示

记录选中状态

数据组件添加一个计算列：选中，赋值为0表示取消选中，赋值为1表示选中。如下图所示

在数据的展现行上添加一个多选框组件，用于单选。多选框组件绑定上面添加的计算列，设置“选项值”属性为1，表示选中后，计算列存入1

单选只能有一个选中，选中新的选项前，取消之前的选中。在“值变化”事件中，如果是选中，则将所有行的“选中”列赋值为0，表示取消之前的选中。当前行的选中值由多选框赋值，“所有行赋值”操作不会改变当前行的选中值。“值变化”事件如下图所示

特别说明：多选框组件的当前值，在 React 和 Vue 中不同

• 在 React 中是 $event.detail，选择“值变化-值”
• 在 Vue 中是 $event.checked，选择“上下文变量-选择状态”

存入选中数据组件

经过上面几步，界面上出现单选效果。还可以使用“复制行”操作，将选中的数据复制到另一个数据组件（选中数据）中，这个数据组件可作为返回的数据。在“值改变”事件中继续添加清除、复制行操作，如下图所示。“清除”操作用于清空选中数据组件中的数据，“复制行”操作用于将选中的行复制到选中数据组件中。

作为单选的选中数据集，里面只会有一条数据，因此在复制行之前，先清除里面的数据。

多选行

在列表组件和表格组件中都可以实现多选，运行效果如下图所示

记录选中状态

数据组件添加一个计算列，数字类型，可用于统计选中数量

添加多选框

在数据的展现行上添加一个多选框组件，用于多选。多选框组件绑定上面添加的计算列，设置“选项值”属性为1，表示选中后，计算列存入1

多选框选中后，会自动给当前行的“选中列”赋值为1。

实现全选

给所有行的选中列赋值为1，表示全选，赋值为0，表示全取消。“值变化”事件如下图所示

显示选中数量

选中时，选中列中存入1，因此选中列的和就是选中数量。本例使用提交栏组件，由于该组件的“价格”属性单位是分，所以需要乘以100，如下图所示

存入选中数据组件

经过上面几步，界面上出现多选效果。还可以使用“复制行”操作，将选中的数据复制到另一个数据组件（选中数据）中，这个数据组件可作为返回的数据。在“值改变”事件中添加复制行、清除行操作，如下图所示。在选中（event.detail 为真）时复制行到选中数据组件，在取消选中（event.detail 为假）时清除选中数据组件中的数据。

全选的“值变化”事件添加加载数据、清除两个操作，如下图所示。在选中“全选”时，通过“加载数据”操作将一个数据组件中的数据全部加载都另一个数据组件中。在取消“全选”时，通过“清除”操作清空一个数据组件中的数据。

添加选中数据组件后，选中数就是选中数据组件的记录数。本例使用提交栏组件，由于该组件的“价格”属性单位是分，所以需要乘以100，如下图所示

简单树

简单树提供树形数据的逐级展示，运行效果如下图所示

简单树组件绑定一个树形“数据集”，设置其中一列为“显示列”，即可逐级加载树形数据。“只读”属性设置为“是”，用于展示树形数据，设置为“否”，用于选择树形数据。设计界面如下图所示

列表类组件

列表类组件提供很多属性用于界面展现和用户交互，鉴于官网介绍的比较详细，本文不再赘述。

案例位置

移动-页面-列表表单组件-列表组件.w

移动-页面-列表表单组件-分类列表组件.w

移动-页面-列表表单组件-宫格组件.w

移动-页面-列表表单组件-步骤条组件.w

移动-页面-列表表单组件-标签页组件.w

移动-页面-列表表单组件-侧边导航组件.w

移动-页面-列表表单组件-树形组件.w