anchor-scroll
基于vue的scroll跳转插件,代替锚点的需求
npm下载
npm install vue-anchor-scroll
main.js
import AnchorScroll from 'vue-anchor-scroll' Vue.use(AnchorScroll)
template
<anchor-scroll>
<trigger-view trigger-key="xxx">
内部与外部均可包裹元素
</trigger-view>
<anchor-view anchor-key="xxx">
内部与外部均可包裹元素
</anchor-view>
</anchor-scroll>
简介
anchor-scroll标签需要包裹trigger-view与anchor-view,只需保证trigger-key与anchor-key值一样,即可通过点击trigger-view页面滚动至anchor-view处。 目前只适用于浏览器滚动条,例如某个div的scroll是不支持的。
文档
anchor-scroll
属性 | 可选值 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
animation-time | -- | 300 | Number | 动画执行时间 |
animation-step | -- | 10 | Number | 动画执行间隔,切记不可设置为0 |
animation-tips | true,false | true | Boolean | 滚动至目标区域后是否进行闪烁提示 |
事件名 | 执行时机 | 返回值 | 说明 |
---|---|---|---|
changeBefore | 滚动执行开始前 | 滚动条位置 | -- |
changeAfter | 滚动执行结束后 | 滚动条位置 | -- |
trigger-view
属性 | 可选值 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
trigger-key | -- | -- | String | 执行跳转的依据,需要与anchor-key对应 |
trigger-view
属性 | 可选值 | 默认值 | 类型 | 说明 |
---|---|---|---|---|
anchor-key | -- | -- | String | 执行跳转的依据,需要与trigger-key对应 |
bug修复记录
1.0.3当跳转目标的高度大于视口高度时,判断出错(判断反了)