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

vue-scrollto官网

github地址

需求简介

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

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

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

实现难点

这需求说实话并不复杂，直接锚点跳转<a href="#id" ></a>就可以实现页面的滚动，让路由中携带的 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:

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-scrollto"></script>

        当它包含在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的某个组件中（楼层对应的按钮添加高亮样式）

   <script setup>
   import scrollTo from 'vue-scrollto'
   
   const router = useRouter()
   
   // tabs
   const tabs = ref([
     { id: 'serve', name: '就医服务' },
     { id: 'dept', name: '重点科室' },
     { id: 'comment', name: '患者评价' },
     { id: 'traffic', name: '交通指南' }
   ])
   const currentLi = ref(0)
   const setCurrentTab = (index) => {
     currentLi.value = index;
   };
   </script>
   
   <template>
     <div class="container">
       <ul class="tabs">
         <li v-for="(item, index) in tabs" :key="item.id" :class="{ 'active': currentLi === index }"
           @click="setCurrentTab(index)" v-scroll-to="{ el: `.${item.id}`, offset: -175 }">
           {{ item.name }}
           <div class="line" v-if="currentLi === index"></div>
         </li>
       </ul>
       <div id="serve" class="serve">
        <div class="top">
           <div class="title">重点科室</div>
           <div class="more">查看更多<span>&gt;</span></div>
         </div>
       </div>
       <div id="dept" class="dept">
         <div class="top">
           <div class="title">重点科室</div>
           <div class="more">查看更多<span>&gt;</span></div>
         </div>
       </div>
       <div id="comment" class="comment">
         <div class="top">
           <div class="title">患者评价</div>
           <div class="more">查看更多<span>&gt;</span></div>
         </div>
       </div>
       <div id="traffic" class="traffic">
         <div class="top">
           <div class="title">交通指南</div>
         </div>
       </div>
     </div>
   </template>
   

附上效果图：

效果

遇到的问题

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

 

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