Anchors标题导航组件

ax-anchors组件可以基于页面的大标题和小标题自动创建一个标题导航菜单,支持多重标题嵌套

简单使用

如果页面使用了h2标签作为导航标签,则直接在页面底部插入ax-anchors标签即可。

本组件默认对页面的所有h2标签进行标题导航。

演示示例
默认 平板竖 手机竖

平滑滚动

如果希望点击菜单跳转时有一个平滑的滚动动画效果,可追加smooth属性。

演示示例
默认 平板竖 手机竖

Attributes属性

属性名 语义类型 可选值 默认值 说明
smooth boolean - - 是否平滑滚动
headings string - 'h2' 标题选择器
offset number - - 标题距离顶部的距离
active number - - 被激活的标题或索引

Methods方法

有组件通用的内置方法:

  • set:设置组件属性,支持一个参数即被设置的属性值键值对{key,value}或其数组
  • reset:重置组件属性,无参数
  • clear:清除属性和值,无参数

基本用法:CompElem.reset();

Events事件

有组件通用的事件:

  • connected:组件连接成功,无参数
  • disconnected:组件断开连接,无参数
  • adopted:组件被转移,无参数
  • set:设置了属性,支持一个参数即设置的值
  • cleared:清除了属性,无参数
  • reset:重置了属性,无参数

基本用法:CompElem.on('connected',()=>{console.log('connected')});