组件：分页框

分页框组件用于在数据量较大时，将数据分割成多个页面进行展示，提供页码导航、上一页/下一页、首页/末页、跳转输入等功能。它支持自定义每页条数、显示总数信息、跳转输入框，并在页码切换时触发回调事件。适用于数据表格分页、商品列表分页、搜索结果分页等场景。

典型使用场景：

数据表格分页（后台管理系统数据展示）
商品列表分页（电商产品列表展示）
文章列表分页（博客文章分页显示）
搜索结果分页（搜索结果的分页导航）
评论列表分页（用户评论的分页显示）

📌 继承自视图的成员速查

本组件继承自 视图 类，可直接使用以下属性和方法：

属性： ID、左边、顶边、右边、底边、宽度、高度、背景、背景颜色、背景图像、文本、文本颜色、字体、字体大小、字体粗细、行高、边框、边框圆角、边框宽度、光标样式、显示模式、透明度、外边距、外边距底、外边距左、外边距右、外边距顶、最大高度、最大宽度、最小高度、最小宽度、内边距、内边距底、内边距左、内边距右、内边距顶、定位、CLASS、InnerHTML、OuterHTML、内容水平对齐方式、首行缩进、可视、显示层级、内联样式、禁用

方法： 追加内联样式(样式文本)、置内联样式(名称,值)、取内联样式值(名称)、取Style对象()、添加事件(事件名称, 回调函数)、删除事件(事件名称, 回调函数)、获取焦点()、清除焦点()、添加样式类(类名称)、移除样式类(类名称)、取样式类列表()、取样式类()、执行单击()、取属性值(属性名)、取属性节点(属性名)、取布局参数()、取渲染宽度()、取渲染高度()、取渲染顶边()、取渲染左边()、左侧对齐到(目标组件,偏移量)、右侧对齐到(目标组件,偏移量)、顶边对齐到(目标组件,偏移量)、底边对齐到(目标组件,偏移量)、右侧对齐到左(目标组件, 偏移量)、左侧对齐到右(目标组件, 偏移量)、底边对齐到顶(目标组件, 偏移量)、顶边对齐到底(目标组件, 偏移量)、有指定属性(属性名)、有属性()、内容可编辑()、包含CSS类(类名)、取命名空间()、取下个节点()、取下个元素()、取节点名称()、取节点类型()、取父节点()、取父元素()、取上个节点()、取上个元素()、销毁()、删除属性(属性名)、删除属性节点(属性名)、置属性值(属性名, 属性值)、置属性节点(属性节点)、取标签名()、移动(左边顶边, 宽度, 高度)、取原生对象()、置被单击回调(回调函数)、置被双击回调(回调函数)、置鼠标被进入回调(回调函数)、置鼠标被移出回调(回调函数)、置鼠标被移动回调(回调函数)、置鼠标被按下回调(回调函数)、置鼠标被抬起回调(回调函数)、置鼠标滚轮被滚动回调(回调函数)、置键盘被按下回调(回调函数)、置按键被抬起回调(回调函数)、置按键被压下回调(回调函数)、置被失去焦点回调(回调函数)、置被获得焦点回调(回调函数)

事件： 被单击(源对象,事件源)、被双击(源对象,事件源)、鼠标被进入(源对象,事件源)、鼠标被移出(源对象,事件源)、鼠标被移动(源对象,事件源)、鼠标被按下(源对象,事件源)、鼠标被抬起(源对象,事件源)、鼠标滚轮被滚动(源对象,事件源)、键盘被按下(源对象,事件源)、按键被抬起(源对象,事件源)、按键被压下(源对象,事件源)、被失去焦点(源对象,事件源)、被获得焦点(源对象,事件源)

💡 完整成员列表及详细说明请参考：视图 类

常用操作速查

操作	属性/方法	示例
设置数据总条数	`总数`	`分页框1.总数 = 100`
设置每页显示条数	`每页条数`	`分页框1.每页条数 = 20`
设置当前页码（从1开始）	`当前页`	`分页框1.当前页 = 2`
显示/隐藏“共X条”信息	`显示总数`	`分页框1.显示总数 = 真`
显示/隐藏页码跳转输入框	`显示跳转`	`分页框1.显示跳转 = 假`
跳转到指定页码	`置当前页(页码)`	`分页框1.置当前页(3)`
设置页码切换回调	`置页码被切换回调(回调函数)`	`分页框1.置页码被切换回调((源对象, 页, 每页条数) => { ... })`

样式美化参考

分页框的外观可通过继承的视图属性以及内部样式进行美化：

整体容器：通过 宽度、高度、背景颜色、边框（如 "1px solid #d9d9d9"）、边框圆角（建议 "6px"）等属性美化。
字体样式：通过 字体大小（建议 "14px"）、文本颜色 控制页码和文字样式。
内边距：使用 内边距（如 "8px 16px"）控制内部间距。
页码按钮：每个页码按钮默认具有边框和背景，可自定义当前页和悬停样式（需通过 CSS 类）。
信息与跳转：显示总数 和 显示跳转 控制额外信息的显示，其样式可通过继承属性调整。

CSS 美化示例（在项目 CSS 文件中定义）：

.my-pagination {
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    padding: 8px 12px;
    background-color: #ffffff;
}
.my-pagination .page-item {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    padding: 4px 10px;
    margin: 0 2px;
    cursor: pointer;
}
.my-pagination .page-item.active {
    background-color: #1890ff;
    color: #ffffff;
    border-color: #1890ff;
}
.my-pagination .page-item:hover:not(.active) {
    border-color: #1890ff;
    color: #1890ff;
}

在代码中应用样式类：分页框1.添加样式类("my-pagination")

基础示例

创建一个最简单的分页框，显示100条数据，每页10条，当前第1页，启用总数和跳转功能。

变量 分页框1 = 创建 分页框()
分页框1.左边 = 50
分页框1.顶边 = 50
分页框1.总数 = 100
分页框1.每页条数 = 10
分页框1.当前页 = 1
分页框1.显示总数 = 真
分页框1.显示跳转 = 真
分页框1.边框 = "1px solid #e8e8e8"
分页框1.边框圆角 = "6px"
分页框1.内边距 = "8px 16px"
分页框1.字体大小 = "14px"

分页框1.置页码被切换回调((源对象, 当前页, 每页条数) => {
    调试输出("切换到第 " + 当前页 + " 页，每页 " + 每页条数 + " 条")
})

添加组件(分页框1)

综合示例：用户列表分页展示

本示例模拟一个用户列表，配合表格和分页框，实现数据分页展示。表格显示当前页数据，分页框控制页数变化，并联动更新表格内容。

' ========== 创建模拟数据 ==========
' 生成100条用户数据
变量 全部用户 = []
变量循环(i = 1, 101, 1)
    变量 用户 = {
        id: i,
        name: "用户" + i,
        email: "user" + i + "@example.com",
        role: 取随机整数(1, 3) == 1 ? "管理员" : (取随机整数(1, 2) == 1 ? "编辑" : "普通用户")
    }
    添加成员(全部用户, 用户)
结束循环

' ========== 创建布局 ==========
变量 主容器 = 创建 弹性布局()
主容器.方向 = "column"
主容器.间距 = 16
主容器.左边 = 30
主容器.顶边 = 30
主容器.宽度 = 800
添加组件(主容器)

' 标题
变量 标题 = 创建 标签()
标题.文本 = "👥 用户列表"
标题.字体大小 = "20px"
标题.字体粗细 = "bold"
主容器.添加组件(标题)

' 表格（使用表格组件简单展示）
变量 表格1 = 创建 表格()
表格1.宽度 = 匹配父
表格1.边框 = "1px solid #e8e8e8"
表格1.边框圆角 = "6px"
表格1.置表头("ID", "姓名", "邮箱", "角色")
主容器.添加组件(表格1)

' 分页框
变量 分页框1 = 创建 分页框()
分页框1.宽度 = 匹配父
分页框1.总数 = 取数组成员数(全部用户)
分页框1.每页条数 = 10
分页框1.当前页 = 1
分页框1.显示总数 = 真
分页框1.显示跳转 = 真
分页框1.边框 = "1px solid #e8e8e8"
分页框1.边框圆角 = "6px"
分页框1.内边距 = "8px 16px"
主容器.添加组件(分页框1)

' ========== 辅助函数：渲染表格 ==========
函数 渲染表格(页码, 每页条数)
    ' 清空表格（除表头外）
    表格1.清空()  ' 注意：清空会删除所有行，表头保留
    ' 计算起始索引
    变量 开始 = (页码 - 1) * 每页条数
    变量 结束 = 开始 + 每页条数
    如果(结束 > 取数组成员数(全部用户))
        结束 = 取数组成员数(全部用户)
    结束 如果
    ' 添加当前页数据
    变量循环(i = 开始, 结束, 1)
        变量 用户 = 全部用户[i]
        表格1.添加一行(用户.id, 用户.name, 用户.email, 用户.role)
    结束循环
结束 函数

' ========== 绑定分页事件 ==========
分页框1.置页码被切换回调((源对象, 当前页, 每页条数) => {
    渲染表格(当前页, 每页条数)
})

' ========== 初始渲染 ==========
渲染表格(1, 10)

属性详解

总数

类型： 数值型
说明： 设置或获取数据的总条数。分页框会根据此值计算总页数，并显示对应的页码数量。

每页条数

类型： 数值型
说明： 设置或获取每页显示的数据条数，默认 10。修改此值后，分页框会重新计算总页数，并可能自动调整当前页（如果当前页超出新总页数）。

当前页

类型： 数值型
说明： 设置或获取当前页码，从 1 开始。设置后会跳转到对应页码并触发回调。若设置的页码超出有效范围（<1 或 >总页数），会被自动修正。

显示总数

类型： 逻辑型
说明： 设置或获取是否在分页框左侧显示“共 X 条”的文本信息，默认为 真。

显示跳转

类型： 逻辑型
说明： 设置或获取是否在分页框右侧显示“前往 [输入框] 页”的跳转功能，默认为 真。

函数详解

置当前页(页码)

功能： 以编程方式跳转到指定页码，效果等同于设置 当前页 属性。
参数： 页码（数值型），从 1 开始。
返回值： 无。如果页码无效，会被自动修正。
示例： 分页框1.置当前页(3)

置页码被切换回调(回调函数)

功能： 设置当页码发生变化时的回调函数。触发时机包括用户点击页码、上一页/下一页、首页/末页、跳转输入确认，以及通过代码修改 当前页 或调用 置当前页。
参数： 回调函数，格式为 (源对象, 当前页, 每页条数) => { ... }。
- 源对象：分页框组件本身。
- 当前页：切换后的页码（数值型）。
- 每页条数：当前每页显示条数（数值型）。
返回值： 无。

示例：

分页框1.置页码被切换回调((源对象, 当前页, 每页条数) => {
    调试输出("当前页：" + 当前页 + "，每页条数：" + 每页条数)
    ' 重新加载数据
    加载数据(当前页, 每页条数)
})

事件说明

页码被切换(源对象, 当前页, 每页条数)

功能： 与 置页码被切换回调 等效，适用于设计文件（.spldg）中定义的组件。