组件：锚点

锚点组件用于在页面滚动时高亮当前可视区域对应的导航链接，并支持点击导航项平滑滚动到目标区域。它常用于长文档目录导航、功能列表快速定位、FAQ分类导航等场景。该组件会监听滚动事件，自动根据滚动位置激活对应的锚点项，并提供回调通知切换事件。

典型使用场景：

• 文章目录导航（长文档的章节跳转）
• 产品功能导航（功能列表的快速定位）
• FAQ分类导航（问题分类的快速查找）
• 产品特性展示（产品功能的锚点导航）

📌 继承自视图的成员速查

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

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

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

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

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

常用操作速查

样式美化参考

锚点组件的外观可通过继承的视图属性进行调整：

• 整体容器：通过 宽度、背景颜色、边框、边框圆角、内边距 等属性美化导航列表。
• 锚点项：每个锚点项默认是块级元素，可通过 文本颜色、字体大小、行高 等控制文本样式。激活状态（当前可视区域对应的项）会自动高亮（通常由组件内部样式控制，可借助 CSS 类自定义）。
• 鼠标悬停：可通过 置鼠标被进入/置鼠标被移出 事件动态改变样式，或通过 CSS 类实现。
• 自定义激活样式：可通过 CSS 类覆盖激活状态的颜色、背景等。

💡 锚点项的激活样式默认由组件管理，若需深度定制，可在添加项目时通过 置属性值 或 添加样式类 为每个项目绑定样式类，并在 CSS 中定义 .active 状态。

基础示例

创建一个简单的锚点导航，包含三个章节，点击导航项平滑滚动到对应区域，并在滚动时自动高亮当前章节。

' ========== 创建锚点导航 ==========
变量 锚点1 = 创建 锚点()
锚点1.左边 = 30
锚点1.顶边 = 30
锚点1.宽度 = 200
锚点1.字体大小 = "14px"
锚点1.文本颜色 = "#666"
锚点1.背景颜色 = "#f8f9fa"
锚点1.边框 = "1px solid #e8e8e8"
锚点1.边框圆角 = "6px"
锚点1.内边距 = "8px"

' 添加锚点项（目标选择器为页面中的元素ID）
锚点1.添加项目("第一章", "#sec1", "ch1")
锚点1.添加项目("第二章", "#sec2", "ch2")
锚点1.添加项目("第三章", "#sec3", "ch3")

' 设置顶部偏移（如果有固定头部，可设置偏移量）
锚点1.置顶部偏移(0)

' 设置切换回调
锚点1.置锚点被切换回调((源对象, 键) => {
    调试输出("切换到：" + 键)
})

添加组件(锚点1)

' ========== 创建对应的内容区域 ==========
' 这些区域需要有对应的ID，以便锚点定位
变量 内容1 = 创建 标签()
内容1.文本 = "这是第一章内容..."
内容1.左边 = 260
内容1.顶边 = 30
内容1.ID = "sec1"  ' 设置ID用于锚点定位
添加组件(内容1)

变量 内容2 = 创建 标签()
内容2.文本 = "这是第二章内容..."
内容2.左边 = 260
内容2.顶边 = 300
内容2.ID = "sec2"
添加组件(内容2)

变量 内容3 = 创建 标签()
内容3.文本 = "这是第三章内容..."
内容3.左边 = 260
内容3.顶边 = 600
内容3.ID = "sec3"
添加组件(内容3)

综合示例：文章目录导航

本示例展示一个完整的文章页面，包含右侧浮动的目录导航，点击目录项可平滑滚动到对应章节，滚动时目录高亮自动更新。

' ========== 创建文章容器（包含所有章节） ==========
变量 文章容器 = 创建 绝对布局()
文章容器.左边 = 30
文章容器.顶边 = 20
文章容器.宽度 = 800
文章容器.高度 = 800
添加组件(文章容器)

' 文章标题
变量 文章标题 = 创建 标签()
文章标题.文本 = "轻语言入门指南"
文章标题.字体大小 = "24px"
文章标题.字体粗细 = "bold"
文章标题.左边 = 0
文章标题.顶边 = 0
文章容器.添加组件(文章标题)

' 定义章节数据
变量 章节数据 = [
    {标题: "介绍", 内容: "轻语言是一种...", id: "intro"},
    {标题: "快速开始", 内容: "首先安装...", id: "start"},
    {标题: "基本语法", 内容: "变量声明...", id: "syntax"},
    {标题: "组件使用", 内容: "按钮、编辑框...", id: "components"},
    {标题: "总结", 内容: "轻语言适合...", id: "summary"}
]

' 动态生成章节内容（每个章节用一个标签显示，并设置ID）
变量 当前顶边 = 60
变量循环(i = 0, 取数组成员数(章节数据), 1)
    变量 章 = 章节数据[i]
    变量 章节标题 = 创建 标签()
    章节标题.文本 = 章.标题
    章节标题.字体大小 = "20px"
    章节标题.字体粗细 = "bold"
    章节标题.左边 = 0
    章节标题.顶边 = 当前顶边
    文章容器.添加组件(章节标题)
    当前顶边 = 当前顶边 + 30
    
    变量 章节内容 = 创建 标签()
    章节内容.文本 = 章.内容
    章节内容.字体大小 = "16px"
    章节内容.文本颜色 = "#444"
    章节内容.左边 = 0
    章节内容.顶边 = 当前顶边
    章节内容.ID = 章.id  ' 设置ID用于锚点定位
    文章容器.添加组件(章节内容)
    当前顶边 = 当前顶边 + 100
结束循环

' ========== 创建锚点导航（浮动在右侧） ==========
变量 锚点导航 = 创建 锚点()
锚点导航.左边 = 580
锚点导航.顶边 = 80
锚点导航.宽度 = 180
锚点导航.背景颜色 = "#ffffff"
锚点导航.边框 = "1px solid #e8e8e8"
锚点导航.边框圆角 = "8px"
锚点导航.内边距 = "12px"
锚点导航.字体大小 = "14px"
锚点导航.文本颜色 = "#333"
锚点导航.定位 = "fixed"  ' 固定定位，随滚动
添加组件(锚点导航)

' 添加锚点项
变量循环(i = 0, 取数组成员数(章节数据), 1)
    变量 章 = 章节数据[i]
    锚点导航.添加项目(章.标题, "#" + 章.id, "nav_" + 章.id)
结束循环

' 设置顶部偏移（因为可能有固定头部，此处设为0）
锚点导航.置顶部偏移(0)

' 设置切换回调
锚点导航.置锚点被切换回调((源对象, 键) => {
    调试输出("导航到：" + 键)
    ' 可在此处记录用户行为或更新其他UI
})

' 设置滚动容器（默认window，无需额外设置）

函数详解

添加项目(标题, 目标选择器, 键)

• 功能： 向锚点组件添加一个导航项。每个项对应页面中的一个目标元素（通过 CSS 选择器定位），当滚动到该元素时，对应项会自动高亮。
• 参数：
  • 标题：文本型，导航项显示的文字。
  • 目标选择器：文本型，CSS 选择器（如 "#sec1"、".section"），用于定位目标元素。
  • 键：文本型，可选，用于唯一标识该项，可在回调中区分。若不传，组件会自动生成。
• 返回值： 数值型，新添加项的索引（从0开始）。
• 示例： 锚点1.添加项目("第一章", "#chapter1", "ch1")

置激活项(键)

• 功能： 手动激活指定键的锚点项（高亮显示），并滚动到对应的目标元素（如果目标元素存在）。通常用于外部控制（如从其他组件跳转）。
• 参数： 键（文本型），要激活的项的键。
• 返回值： 无。
• 示例： 锚点1.置激活项("ch2")

置滚动容器(容器元素)

• 功能： 设置监听滚动的容器元素（默认为 window）。当在某个容器内部滚动时，锚点监听该容器的滚动事件并更新高亮。
• 参数： 容器元素，可以是原生 DOM 元素（通过 取原生对象() 获取）或 空（恢复默认监听 window）。
• 返回值： 无。
• 示例：

  变量 容器 = 滚动框1.取原生对象()
  锚点1.置滚动容器(容器)
  

置顶部偏移(偏移像素)

• 功能： 设置滚动到目标元素时的顶部偏移量（像素）。当页面有固定头部（如导航栏）时，设置此偏移量可避免目标元素被头部遮挡。
• 参数： 偏移像素（数值型），正数表示向下偏移。
• 返回值： 无。
• 示例： 锚点1.置顶部偏移(60) 表示目标元素顶部会与视口顶部保持 60px 距离。

置锚点被切换回调(回调函数)

• 功能： 设置当高亮的锚点项发生变化时的回调函数。触发时机包括滚动到新区域和通过代码调用 置激活项。
• 参数： 回调函数，格式为 (源对象, 键) => { ... }。
  • 源对象：锚点组件本身。
  • 键：当前激活的锚点项的键。
• 返回值： 无。
• 示例：

  锚点1.置锚点被切换回调((源对象, 键) => {
      调试输出("当前章节：" + 键)
  })
  

清空()

• 功能： 清空所有锚点项，移除所有导航链接。
• 返回值： 无。

销毁()

• 功能： 销毁锚点组件，移除滚动监听，释放资源。调用后组件不可再用。
• 返回值： 无。

事件说明

锚点被切换(源对象, 键)

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

  事件 锚点1.锚点被切换(源对象, 键)
      调试输出("切换到：" + 键)
  结束 事件
  

⚠️ 注意事项

1. 目标元素必须存在：添加锚点项时，目标选择器 必须能匹配到页面中的一个元素（如通过 ID 或 class），否则点击或滚动定位会失效。
2. 滚动容器：默认监听 window 的滚动，若在自定义滚动容器（如 垂直滚动框）内部使用，需通过 置滚动容器 指定该容器的原生 DOM 元素。
3. 顶部偏移：设置偏移量后，组件会计算滚动位置时考虑偏移，确保目标元素不被固定头部遮挡。
4. 平滑滚动：点击锚点项时，组件会自动使用平滑滚动（behavior: 'smooth'）滚动到目标位置，所有现代浏览器均支持。
5. 高亮更新：滚动时，组件会实时计算当前可视区域内的目标元素，并自动高亮对应的导航项。回调 锚点被切换 会在高亮项变化时触发。
6. 键的唯一性：建议为每个锚点项指定唯一的 键，以便在回调中准确识别。
7. 性能：滚动事件监听较为频繁，组件内部已做节流优化，但仍建议避免在回调中执行复杂计算。
8. 销毁：在页面切换或组件不再使用时，应调用 销毁() 移除滚动监听，防止内存泄漏。

相关文档

• 文档框架基础类_视图 —— 视图类提供的所有通用属性和方法
• 文档列表类组件_垂直滚动框 —— 自定义滚动容器
• 文档轻语言网站：轻语言语法速查 —— 拉姆达表达式、循环语句等
• 文档综合演示：文章目录导航 —— 实际应用示例