分页器

分页组件用于分割长列表，当加载数据需要切换页码浏览数据(如轮播表格一次性导入数千条数据时)，可应用分页组件进行页码切割展示，每次只加载一个页面。

效果案例

配置

基础属性

组件位置：包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。

组件尺寸：包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高。再次单击进行解锁，解锁后宽高比不受限制。比例锁默认不锁定。

旋转：以组件的中心为中心点，进行旋转，单位为度（°）。手动输入角度值，控制组件的旋转角度；

• 单击图标，控制组件左右翻转样式；
• 单击图标，控制组件上下翻转样式。

透明：取值范围为0~100%。为0%时，组件隐藏；为100%时，组件完全显示。默认为100%。

组件属性

全局

前进后退按钮：开启后可点击按钮快速进行上一页/下一页切换操作。

宽度/高度：支持调整选项的宽、高。

圆角：可调整选项的圆角样式。

项间距：可调整页数选项之间的间距。

每页行数：通过配置分页器每页的数据行数和数据中的总行数来确定分页器的页码数。

省略号

支持调整省略号的颜色样式。

总数

间距：总数与分页器之间的距离。

前后缀：可自定义配置总数的前后缀的内容以及与总数之间的距离。

文本样式：总数整体的文本配置。

跳转

当页数过多时，可用快速跳转至所需的页码，失焦或回车确认跳转。

左边距：跳转与分页器之间的距离。

前缀：可自定义配置总数的前缀的内容以及与跳转之间的距离。

文本样式：跳转整体的文本配置。

输入框：

• 宽度/高度：输入框的尺寸；
• 背景：输入框的默认、悬浮、选中背景颜色；
• 边框：边框的宽度以及其默认、悬浮、选中边框颜色；
• 数值样式：输入框内数值的文本样式。

确认按钮：启用确认按钮后仅点击按钮或回车才能确定跳转。

• 内容：按钮自定义内容；
• 间距：按钮与跳转之间的距离；
• 背景：输入框的默认、悬浮背景颜色；
• 边框：边框的宽度以及其默认、悬浮边框颜色；
• 文本样式：按钮内的文本样式。

数据

组件数据格式

静态数据-JSON数据案例

[
    {
        "count": 32
    }
]

交互

支持配置页码切换时事件
当分页器页码切换时，触发交互事件：设置大屏变量、打开超链接、设置可见、移动、设置JS事件、设置面板状态。

举例

本例子介绍如何通过「数据模型（SQL 分页查询）+ 大屏变量 + 表达式」实现分页器与轮播表格的联动。

核心思路：分页器翻页 → 把当前页写入大屏变量 pageNum → 轮播表格参数配置里用表达式计算 offset → 数据模型 SQL 用 LIMIT/OFFSET 取对应页数据 → 返回轮播表格展示。

完整链路：

分页器(currentPage) → pageNum(大屏变量) → offset(表达式计算) → SQL LIMIT/OFFSET 取页 → 轮播表格

1. 创建数据模型（分页查询 SQL）

本地创建数据模型，链接数据库，配置分页查询 SQL。

SELECT *
FROM bw_hw
ORDER BY ID DESC
LIMIT {pageSize[20]} OFFSET {offset[0]}

说明：

• LIMIT {pageSize[20]}：每页取 20 条（pageSize 为预置参数，默认值 20）
• OFFSET {offset[0]}：跳过前 N 条（offset 为预置参数，默认值 0）
• {参数名[默认值]} 是平台的数据模型预置参数语法

2. 轮播表格配置数据源 + 映射字段

在大屏添加轮播表格，配置数据源为「数据模型」，选择步骤 1 创建的分页查询。

然后映射字段名：

• 列 1：字段 BM → 显示名「第一列」
• 列 2：字段 PP → 显示名「第二列」
• 列 3：字段 HUKCTX → 显示名「第三列」

3. 创建两个大屏变量

创建两个数值型大屏变量：

pageSize（每页行数，默认 20）：

pageNum（当前页码，默认 1）：

4. 轮播表格配置数据源变量参数 ⭐（关键）

回到轮播表格的数据配置，展开「参数配置」，添加两个参数：

参数 1：pageSize

参数值（表达式）：

{pageSize}

参数 2：offset

参数值（表达式，关键）：

{pageNum}*{pageSize}-{pageSize}

offset 公式推导：第 N 页应跳过前 (N-1) × pageSize 条

(N-1) × pageSize = N × pageSize - pageSize = pageNum × pageSize - pageSize

5. 添加分页器，配置页码切换事件

添加分页器组件：

配置「页码切换时」事件：

• 动作类型：设置大屏变量
• 勾选变量：pageNum
• 值：当前组件数据（即分页器当前页码）

配置完成后即可实现：分页器翻页 → 写入 pageNum → offset 重新计算 → SQL 取新页 → 轮播表格切换。

SQL 模板（可复用）

替换表名和排序列即可：

SELECT *
FROM <你的表名>
ORDER BY <排序列> DESC
LIMIT {pageSize[20]} OFFSET {offset[0]}

不同数据库的分页语法（替换 LIMIT/OFFSET 部分）：

关键参数 & 表达式

变量命名对照

本教程涉及 3 个”页码相关”名字，含义不同：

关系：分页器动作 = “把 currentPage 写到 pageNum“，于是 pageNum 跟随分页器翻页而变化。

常见问题

Q1：offset 公式为什么是 pageNum*pageSize - pageSize？

SQL 的 OFFSET 跳过的是”前 N-1 页”的全部行数：

(N-1) × pageSize = N × pageSize - pageSize = pageNum × pageSize - pageSize

两种写法等价，本教程写法更便于在平台表达式里展开。

Q2：改了 pageSize（比如改成 10）会怎样？

改大屏变量 pageSize 的默认值即可，offset 表达式会自动用新值。但要注意分页器的”每页行数”也要同步改，否则分页器算的总页数和实际不一致。

Q3：currentPage 是哪来的？

currentPage 是分页器的内置系统字段（分页器当前选中页）。在”设置大屏变量值 = 当前组件数据”的下拉里会出现，作为数据源提供给大屏变量。

Q4：不用数据库、纯静态 JSON 能实现吗？

理论上可以，但平台数据模型是 SQL 形式，原生支持表达式 + LIMIT/OFFSET，用数据库方案最稳。纯静态 JSON 需要额外用 JS 表达式切数组，较麻烦。