1.0.7 • Published 3 years ago
vue-anchor-scroll v1.0.7
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当跳转目标的高度大于视口高度时，判断出错（判断反了）