vue实现导航滚动

vue实现导航滚动的方法

使用vue-router的scrollBehavior

在vue-router的配置文件中，可以设置scrollBehavior来控制页面切换时的滚动行为。返回的对象可以包含x、y坐标，或选择锚点滚动。

const router = new VueRouter({
  routes,
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } 
    if (to.hash) {
      return {
        selector: to.hash
      }
    }
    return { x: 0, y: 0 }
  }
})

监听滚动事件实现导航高亮

通过监听window的scroll事件，结合vue的响应式数据，可以实现滚动时导航高亮效果。

export default {
  data() {
    return {
      activeSection: ''
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      const sections = document.querySelectorAll('section')
      sections.forEach(section => {
        const top = window.scrollY
        const offset = section.offsetTop - 100
        const height = section.offsetHeight
        if (top >= offset && top < offset + height) {
          this.activeSection = section.getAttribute('id')
        }
      })
    }
  }
}

平滑滚动到指定位置

使用Element.scrollIntoView()方法实现平滑滚动效果，可以配合vue的ref属性使用。

methods: {
  scrollTo(refName) {
    const element = this.$refs[refName]
    element.scrollIntoView({ 
      behavior: 'smooth' 
    })
  }
}

使用第三方库vue-scrollto

安装vue-scrollto库可以更方便地实现平滑滚动功能。

import VueScrollTo from 'vue-scrollto'

Vue.use(VueScrollTo, {
  duration: 500,
  easing: "ease"
})

// 使用方式
this.$scrollTo('#target')

导航固定定位

通过CSS实现导航栏在滚动时固定在页面顶部。

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1000;
}

滚动节流优化性能

使用lodash的throttle函数优化滚动事件性能，避免频繁触发。

import { throttle } from 'lodash'

methods: {
  handleScroll: throttle(function() {
    // 滚动处理逻辑
  }, 100)
}