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')});