vue.js - 页面局部滚动，利用`vue-scrollto`做了页面内部导航的功能，如何实现监听滚动页面，自动切换导航菜单？

Question

页面局部滚动，利用vue-scrollto做了页面内部导航的功能，如何实现监听滚动页面，自动切换导航菜单？点击导航，右侧滚动到锚定位置，同时，右侧滚动时，希望能自定定位导航菜单。

监听滚动页面，自动切换导航菜单

Answer 1

要实现监听滚动页面并自动切换导航菜单，你可以使用Vue的滚动监听功能和vue-scrollto插件。下面是一个基本的实现步骤：

1. 首先，确保你已经安装了vue-scrollto插件。你可以通过npm或yarn进行安装：

npm install vue-scrollto

或者

yarn add vue-scrollto

2. 在你的Vue组件中，引入vue-scrollto插件和相关的样式。你可以在main.js或其他适当的地方进行引入：

import VueScrollTo from 'vue-scrollto';import 'vue-scrollto/dist/vue-scrollto.css';

3. 在Vue组件的data中，定义一个变量来存储当前滚动的位置。例如：

data() {  return {    currentScroll: null,  };},

4. 在Vue组件的mounted钩子函数中，使用vue-scrollto插件的listenScroll方法来监听滚动事件。同时，设置一个回调函数来处理滚动事件。在这个回调函数中，你可以根据滚动的位置来更新导航菜单的选中状态。例如：

mounted() {  this.$nextTick(() => {    this.listenScroll();  });},methods: {  listenScroll() {    const scrollTo = VueScrollTo.default;    const instance = scrollTo.getInstance(this.$el);    instance.listenScroll(({ x, y }) => {      this.currentScroll = { x, y };      // 根据滚动的位置更新导航菜单的选中状态      // 你可以根据实际情况进行相应的逻辑处理    });  },},

5. 在你的模板中，使用vue-scrollto插件提供的scrollTo指令来实现页面内部的导航功能。你可以根据滚动的位置来设置锚定的位置。例如：

<template>  <div>    <!-- 导航菜单 -->    <ul>      <li v-for="item in menuItems" :key="item.id" @click="scrollTo(item.id)">        {{ item.name }}      </li>    </ul>    <!-- 页面内容 -->    <div>      <!-- 使用vue-scrollto插件进行页面内部导航 -->      <div v-scroll-to="scrollToOptions" ref="content">        <!-- 页面内容 -->      </div>    </div>  </div></template>

6. 在你的组件的methods中，定义一个scrollTo方法来处理导航菜单的点击事件。这个方法将调用vue-scrollto插件的scrollTo方法来滚动到指定的位置。例如：

methods: {  // ...其他方法...  scrollTo(id) {    const scrollTo = VueScrollTo.default;    const instance = scrollTo.getInstance(this.$el);    instance.scrollTo({ id, duration: 1000 }); // 根据实际情况设置滚动时长和其他参数  },},