组件：水平滚动框

水平滚动框是一个容器型组件，用于在固定宽度区域内展示超出可视范围的内容，并提供水平方向的滚动能力。它支持动态添加、删除子组件，适合承载横向排列且宽度会动态变化的内容集合，如图片轮播、横向导航菜单、标签页、卡片横向滚动等场景。与垂直滚动框相比，它的滚动方向为水平，且子组件默认从左到右排列。

典型使用场景：

横向导航菜单（分类标签、频道切换）
图片/卡片横向滚动展示（产品展示、相册）
标签页栏（多标签横向排列，超出可滚动）
横向时间线或步骤指示器
任何需要水平滚动的自定义内容区域

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

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

样式美化参考

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

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

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

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

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

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

基础示例

创建一个固定宽度的水平滚动容器，添加若干图片框，当图片总宽度超出容器宽度时自动出现滚动条。

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

' ========== 添加若干图片框 ==========
变量 图片地址 = [
    "https://picsum.photos/200/140?random=1",
    "https://picsum.photos/200/140?random=2",
    "https://picsum.photos/200/140?random=3",
    "https://picsum.photos/200/140?random=4",
    "https://picsum.photos/200/140?random=5",
    "https://picsum.photos/200/140?random=6"
]

变量循环(i = 0, 取数组成员数(图片地址), 1)
    变量 图 = 创建 图片框()
    图.图片宽度 = 200
    图.图片高度 = 140
    图.图片 = 图片地址[i]
    图.边框圆角 = "4px"
    图.外边距右 = 12  ' 图片间距
    滚动框1.添加组件(图)
结束循环

综合示例：横向标签导航（可滚动分类栏）

本示例模拟一个可横向滚动的分类标签栏，每个标签可点击切换，并配合内容区域展示对应分类信息。

' ========== 创建水平滚动框（标签栏） ==========
变量 标签栏 = 创建 水平滚动框()
标签栏.左边 = 20
标签栏.顶边 = 20
标签栏.宽度 = 480
标签栏.高度 = 44
标签栏.背景颜色 = "#ffffff"
标签栏.边框 = "1px solid #e8e8e8"
标签栏.边框圆角 = "8px"
标签栏.内边距 = "4px"
添加组件(标签栏)

' ========== 添加标签按钮 ==========
变量 分类数据 = [
    "全部", "电子产品", "家居用品", "图书文具", "服装服饰",
    "食品饮料", "运动户外", "汽车配件", "美妆护肤", "母婴用品"
]

' 存储标签按钮的引用，用于更新选中状态
变量 标签按钮列表 = []

变量循环(i = 0, 取数组成员数(分类数据), 1)
    变量 标签文本 = 分类数据[i]
    变量 按钮 = 创建 按钮()
    按钮.文本 = 标签文本
    按钮.宽度 = 80
    按钮.高度 = 32
    按钮.背景颜色 = "transparent"
    按钮.文本颜色 = "#333"
    按钮.字体大小 = "14px"
    按钮.边框 = "none"
    按钮.边框圆角 = "4px"
    按钮.光标样式 = "pointer"
    标签栏.添加组件(按钮)
    
    ' 存储引用
    添加成员(标签按钮列表, 按钮)
结束循环

' ========== 内容显示区域 ==========
变量 内容标签 = 创建 标签()
内容标签.左边 = 20
内容标签.顶边 = 80
内容标签.文本 = "当前分类：全部"
内容标签.字体大小 = "18px"
内容标签.字体粗细 = "bold"
添加组件(内容标签)

' ========== 辅助函数：重置所有按钮样式 ==========
函数 重置按钮样式()
    变量循环(i = 0, 取数组成员数(标签按钮列表), 1)
        变量 按钮 = 标签按钮列表[i]
        按钮.背景颜色 = "transparent"
        按钮.文本颜色 = "#333"
    结束循环
结束 函数

' ========== 为每个按钮绑定点击事件 ==========
变量 选中索引 = 0
变量循环(i = 0, 取数组成员数(标签按钮列表), 1)
    变量 按钮 = 标签按钮列表[i]
    变量 分类名 = 分类数据[i]
    
    按钮.置被单击回调((源对象, 事件对象) => {
        ' 重置所有按钮样式
        重置按钮样式()
        ' 高亮当前按钮
        源对象.背景颜色 = "#1890ff"
        源对象.文本颜色 = "#ffffff"
        ' 更新内容
        内容标签.文本 = "当前分类：" + 分类名
        ' 模拟加载数据
        弹出提示("加载 " + 分类名 + " 数据")
    })
结束循环

' 默认选中第一项
变量 默认按钮 = 标签按钮列表[0]
默认按钮.背景颜色 = "#1890ff"
默认按钮.文本颜色 = "#ffffff"

函数详解

添加组件(视图对象)

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

取子组件数()

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

取子组件(索引)

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

示例：

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

取内容包裹层()

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