组件：垂直滚动框

垂直滚动框是一个容器型组件，用于在固定高度区域内展示超出可视范围的内容，并提供垂直方向的滚动能力。它支持动态添加、删除子组件，适合承载数量不固定或高度会动态变化的内容列表。常用于聊天消息列表、动态信息流、长文本展示、商品列表等需要垂直滚动的场景。

典型使用场景：

聊天消息列表（新消息不断追加，自动滚动到底部）
动态信息流（新闻列表、通知列表）
长文本/协议内容展示（用户协议、帮助文档）
商品或卡片列表（高度不固定的商品展示）
任何需要垂直滚动容器的自定义内容区域

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

操作	属性/方法	示例
设置容器尺寸（决定滚动区域大小）	`宽度` / `高度`	`垂直滚动框1.宽度 = 400`，`垂直滚动框1.高度 = 300`
添加子组件（自动追加到末尾）	`添加组件(视图对象)`	`垂直滚动框1.添加组件(卡片1)`
获取子组件总数	`取子组件数()`	`变量数量 = 垂直滚动框1.取子组件数()`
获取指定索引的子组件	`取子组件(索引)`	`变量组件 = 垂直滚动框1.取子组件(0)`
删除指定索引的子组件	`删除组件(索引)`	`垂直滚动框1.删除组件(2)`
清空所有子组件	`清空()`	`垂直滚动框1.清空()`
获取内容包裹层（用于精细控制）	`取内容包裹层()`	`变量层 = 垂直滚动框1.取内容包裹层()`

样式美化参考

垂直滚动框的样式主要通过继承的视图属性调整：

整体容器：通过 宽度、高度 设置滚动区域的尺寸；背景颜色、边框、边框圆角 等属性美化容器外观。
内容区域：内部内容包裹层默认自动撑开高度，超出容器高度时出现滚动条。
滚动条样式：滚动条样式由浏览器原生控制，可通过 CSS 伪类自定义（需借助 添加样式类 或 内联样式）。
内边距：通过 内边距 为内容区域添加内边距，使内容不贴边。

滚动条美化示例（通过 CSS 类）：

' 添加自定义滚动条样式类
垂直滚动框1.添加样式类("custom-scrollbar")

对应的 CSS（在项目 CSS 文件中定义）：

.custom-scrollbar::-webkit-scrollbar {
    width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}

基础示例

创建一个固定高度的滚动容器，添加若干卡片组件，当卡片超出容器高度时自动出现滚动条。

' ========== 创建垂直滚动框 ==========
变量 滚动框1 = 创建 垂直滚动框()
滚动框1.左边 = 50
滚动框1.顶边 = 50
滚动框1.宽度 = 320
滚动框1.高度 = 400
滚动框1.背景颜色 = "#fafafa"
滚动框1.边框 = "1px solid #e8e8e8"
滚动框1.边框圆角 = 8
滚动框1.内边距 = "8px"
添加组件(滚动框1)

' ========== 添加若干卡片 ==========
变量循环(i = 1, 6, 1)
    变量 卡片 = 创建 卡片框()
    卡片.宽度 = 匹配父
    卡片.标题 = "卡片 " + i
    卡片.内容 = "<p>这是第 " + i + " 张卡片的内容，高度会根据内容自动调整。</p>"
    卡片.边框 = "1px solid #d9d9d9"
    卡片.边框圆角 = 4
    卡片.外边距底 = 8
    滚动框1.添加组件(卡片)
结束循环

综合示例：动态消息列表（模拟聊天室）

本示例模拟一个实时消息列表，通过定时器不断添加新消息，并自动滚动到底部显示最新内容。

' ========== 创建界面布局 ==========
' 标题
变量 标题 = 创建 标签()
标题.左边 = 20
标题.顶边 = 20
标题.文本 = "📱 实时消息"
标题.字体大小 = 18
标题.字体粗细 = "bold"
添加组件(标题)

' 垂直滚动框（消息容器）
变量 消息列表 = 创建 垂直滚动框()
消息列表.左边 = 20
消息列表.顶边 = 60
消息列表.宽度 = 400
消息列表.高度 = 350
消息列表.背景颜色 = "#ffffff"
消息列表.边框 = "1px solid #e8e8e8"
消息列表.边框圆角 = 8
消息列表.内边距 = "12px"
添加组件(消息列表)

' 底部控制栏
变量 输入框 = 创建 单行输入框()
输入框.左边 = 20
输入框.顶边 = 425
输入框.宽度 = 300
输入框.提示文本 = "输入消息..."
添加组件(输入框)

变量 发送按钮 = 创建 按钮()
发送按钮.左边 = 330
发送按钮.顶边 = 422
发送按钮.宽度 = 80
发送按钮.高度 = 36
发送按钮.文本 = "发送"
发送按钮.背景颜色 = "#1890ff"
发送按钮.文本颜色 = "#ffffff"
发送按钮.边框圆角 = 6
添加组件(发送按钮)

' 统计标签
变量 统计标签 = 创建 标签()
统计标签.左边 = 20
统计标签.顶边 = 470
统计标签.文本 = "共 0 条消息"
统计标签.文本颜色 = "#999"
统计标签.字体大小 = 12
添加组件(统计标签)

' ========== 辅助函数：添加消息 ==========
函数 添加消息(用户名, 内容)
    ' 创建消息项
    变量 消息容器 = 创建 弹性布局()
    消息容器.方向 = "row"
    消息容器.宽度 = 匹配父
    消息容器.外边距底 = 8
    消息容器.内边距 = "8px 12px"
    消息容器.背景颜色 = "#f5f5f5"
    消息容器.边框圆角 = 6
    
    ' 用户名标签
    变量 用户标签 = 创建 标签()
    用户标签.文本 = 用户名 + "："
    用户标签.字体大小 = 13
    用户标签.字体粗细 = "bold"
    用户标签.文本颜色 = "#1890ff"
    用户标签.宽度 = 60
    消息容器.添加组件(用户标签)
    
    ' 内容标签
    变量 内容标签 = 创建 标签()
    内容标签.文本 = 内容
    内容标签.字体大小 = 13
    内容标签.文本颜色 = "#333"
    内容标签.宽度 = "flex-grow"
    消息容器.添加组件(内容标签)
    
    ' 添加到滚动框
    消息列表.添加组件(消息容器)
    
    ' 更新统计
    变量 总数 = 消息列表.取子组件数()
    统计标签.文本 = "共 " + 总数 + " 条消息"
    
    ' 自动滚动到底部（通过操作原生 DOM）
    变量 包裹层 = 消息列表.取内容包裹层()
    如果(包裹层 != 空)
        ' 获取父容器（滚动容器）并设置 scrollTop
        变量 父元素 = 包裹层.取父元素()
        如果(父元素 != 空)
            ' 置滚动位置到底部
            父元素.scrollTop = 包裹层.scrollHeight
        结束 如果
    结束 如果
结束 函数

' ========== 模拟接收消息 ==========
变量 消息计数 = 0
变量 模拟用户 = ["张三", "李四", "王五", "系统"]

' 定时添加模拟消息
变量 时钟ID = 创建时钟(() => {
    消息计数 = 消息计数 + 1
    变量 随机用户 = 模拟用户[取随机整数(0, 取数组成员数(模拟用户) - 1)]
    变量 随机内容 = "这是第 " + 消息计数 + " 条消息，来自 " + 随机用户
    添加消息(随机用户, 随机内容)
}, 2000)  ' 每2秒一条

' ========== 发送按钮事件 ==========
发送按钮.置被单击回调((源对象, 事件对象) => {
    变量 文本 = 删首尾空(输入框.内容)
    如果(文本 == "")
        弹出提示("请输入消息内容")
        返回
    结束 如果
    
    添加消息("我", 文本)
    输入框.内容 = ""  ' 清空输入框
    输入框.获取焦点()
})

' 回车发送
输入框.置键盘被按下回调((源对象, 事件对象) => {
    如果(事件对象.keyCode == 13)  ' 回车键
        发送按钮.执行单击()
    结束 如果
})

' ========== 模拟停止按钮（可选） ==========
变量 停止按钮 = 创建 按钮()
停止按钮.左边 = 20
停止按钮.顶边 = 510
停止按钮.宽度 = 100
停止按钮.高度 = 32
停止按钮.文本 = "停止模拟"
停止按钮.边框圆角 = 6
添加组件(停止按钮)

停止按钮.置被单击回调((源对象, 事件对象) => {
    销毁时钟(时钟ID)
    停止按钮.禁用 = 真
    停止按钮.文本 = "已停止"
    弹出提示("消息模拟已停止")
})

函数详解

添加组件(视图对象)

功能： 向滚动框的内容区域末尾添加一个子组件。
参数： 视图对象，必须是继承自 视图 的组件实例（如 标签、按钮、卡片框 等）。
返回值： 无。
说明： 添加后，如果内容总高度超出滚动框的 高度，会自动出现滚动条。
示例： 滚动框1.添加组件(新卡片)

取子组件数()

功能： 获取当前滚动框中子组件的数量。
返回值： 数值型，子组件总数。
示例： 变量数量 = 滚动框1.取子组件数()

取子组件(索引)

功能： 获取指定索引位置的子组件对象。
参数： 索引（数值型），从 0 开始。
返回值： 视图对象，若索引无效则返回 空。

示例：

变量 第一个组件 = 滚动框1.取子组件(0)
如果(第一个组件 != 空)
    调试输出("第一个组件类型：" + 取数据类型(第一个组件))
结束 如果

取内容包裹层()

功能： 获取滚动框内部用于包裹所有子组件的容器层对象。可用于精细控制布局或操作滚动位置。
返回值： DOM 元素对象（原生 HTML 元素）。