vue-scrollto：非常好用的页面定位滚动插件

vue-scrollto官网

github地址

需求简介

楼层效果在购物网站比较常见，便于客户查看商品。

这个效果其实可以说是老生常谈了，原生js我们写过，在 JQuery的插件里随便搜一下，也有大把的案例手把手教你如何来实现。

但如果把这个效果放在 vue 中来实现，那先前的一些思路就用不上了。

实现难点

这需求说实话并不复杂，直接锚点跳转就可以实现页面的滚动，让路由中携带的 hash 所对应的 id 名称的元素滚动到页面的对应位置。

但是在 vue 项目中，路由的实现占据了 hash，那么再使用锚点跳转，路由也会跟着改变。这显然不是我们想要实现的效果。

另外，页面滚动时，监听滚动事件来点亮对应的楼层按钮，也需要仔细思考下如何优雅的实现。

兼容性

支持vue3的版本是v2.19.0 及以上版本。

截止到2021年5月7日，npm安装后的版本是v2.20.0 可以支持vue2和vue3。

本例以2.20.0版本为。

安装插件（适用于vue2/3）

Using npm:（我用的）

npm install --save vue-scrollto

        安装后package.json中显示："vue-scrollto": "^2.20.0" 

Using yarn:

yarn add vue-scrollto

Directly include it in html:

        当它包含在html中时，它会自动调用“Vue.use”并设置一个“VueScrollTo”变量，您可以使用！

基于Vue3的使用

1. main.js中

   import { createApp } from "vue";
   
   // 引入楼层效果插件
   import VueScrollTo from 'vue-scrollto'
   
   let scrollOptions = {
     container: "body", //滚动的容器
     duration: 500, //滚动时间
     easing: "ease", //缓动类型
     offset: -50, // 滚动时应应用的偏移量。此选项接受回调函数
     force: true, // 是否应执行滚动
     cancelable: true, // 用户是否可以取消滚动
     onStart: false, // 滚动开始时的钩子函数
     onDone: false, // 滚动结束时候的钩子函数
     onCancel: false, // 用户取消滚动的钩子函数
     x: false, // 是否要在x轴上也滚动
     y: true    // 是否要在y轴上滚动
   };
   
   const app = createApp(App)
   
   app.use(VueScrollTo,scrollOptions).mount("#app");

2. Vue的某个组件中（楼层对应的按钮添加高亮样式）

附上效果图：

效果

遇到的问题

滑动时的偏移量不对，由于我们初始化设置的是 ：offset: -50, // 滚动时应应用的偏移量。此选项接受回调函数。所以我根据需要的大小，在页面中进行了调整！

 

有问题欢迎小伙伴们留言讨论哟！