vue-scrollto
时间: 2023-10-30 14:02:44 浏览: 138
Vue-scrollto 是一个 Vue.js 的滚动插件,可以让你在 Vue.js 应用程序中轻松实现平滑滚动效果。它可以通过指令或者组件的方式进行使用,支持多种配置选项。
使用指令的方式:
```vue
<template>
<div>
<button v-scroll-to="'#target'">滚动到目标元素</button>
<div id="target">
目标元素
</div>
</div>
</template>
<script>
import { VueScrollTo } from 'vue-scrollto'
export default {
directives: {
'scroll-to': VueScrollTo.directive
}
}
</script>
```
使用组件的方式:
```vue
<template>
<div>
<vue-scroll-to :element="'#target'" :duration="500" :offset="-50">
<button>滚动到目标元素</button>
</vue-scroll-to>
<div id="target">
目标元素
</div>
</div>
</template>
<script>
import VueScrollTo from 'vue-scrollto'
export default {
components: {
VueScrollTo
}
}
</script>
```
这里只是简单的介绍了 Vue-scrollto 的使用方法,更多详细的内容可以参考官方文档:https://vue-scrollto.netlify.app/。
阅读全文