vue-scrollto

特点

• 平滑滚动：通过动画效果平滑滚动到指定元素。
• 易于使用：简单的指令和方法调用，适合快速集成。
• 多种配置选项：支持自定义滚动速度、偏移量、取消控制等。
• 事件回调：在滚动开始、进行中和结束时触发回调。
• Vue Router 支持：与 Vue Router 无缝集成，支持滚动到特定路由。

使用场景

• 单页应用：在单页应用中实现内部导航滚动。
• 长页面：在长页面中快速定位到指定内容。
• 导航栏：用于导航栏点击后平滑滚动到对应的内容部分。
• 表单验证：在表单验证失败时滚动到出错的输入项。

安装方式

使用 npm 或 yarn 安装：

npm install vue-scrollto

或

yarn add vue-scrollto

使用示例

全局注册

import Vue from 'vue';
import VueScrollTo from 'vue-scrollto';

Vue.use(VueScrollTo);

// 现在可以在任何组件中使用 v-scroll-to 指令

在组件中使用

<template>
  <div>
    <button v-scroll-to="'#element'">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

使用配置选项

<template>
  <div>
    <button v-scroll-to="{el: '#element', duration: 500, offset: -100}">Scroll to Element</button>
    <div id="element" style="margin-top: 1000px;">Target Element</div>
  </div>
</template>

以编程方式调用

this.$scrollTo('#element', 500, {
  offset: -100,
  easing: 'ease-in-out',
  onDone: () => {
    console.log('Scrolling done');
  }
});

常用 API 介绍

• v-scroll-to 指令：用于在模板中添加滚动指令。
• this.$scrollTo 方法：以编程方式滚动到指定元素。
• 配置选项：
  • el：目标元素的选择器或 DOM 元素。
  • duration：滚动持续时间（毫秒）。
  • offset：滚动偏移量（像素）。
  • easing：滚动动画效果。
  • onDone：滚动完成时的回调函数。
  • onCancel：滚动取消时的回调函数。

官方资料

• GitHub 仓库
• 官方文档