vue实现导航滚动

监听滚动事件

在Vue中实现导航滚动效果，可以通过监听窗口的滚动事件来控制导航栏的显示或隐藏。使用window.addEventListener来绑定滚动事件，在组件销毁时记得移除监听器以避免内存泄漏。

mounted() {
  window.addEventListener('scroll', this.handleScroll);
},
beforeDestroy() {
  window.removeEventListener('scroll', this.handleScroll);
},
methods: {
  handleScroll() {
    this.isScrolled = window.scrollY > 0;
  }
}

动态样式绑定

根据滚动状态动态绑定导航栏的样式。使用Vue的v-bind:class或:class语法，根据isScrolled的值添加或移除样式类。

<nav :class="{ 'scrolled': isScrolled }">
  <!-- 导航内容 -->
</nav>

nav {
  transition: all 0.3s ease;
}
nav.scrolled {
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

平滑滚动到锚点

实现点击导航菜单项平滑滚动到页面指定位置。使用scrollIntoView方法，并设置behavior: 'smooth'。

methods: {
  scrollTo(target) {
    const element = document.querySelector(target);
    if (element) {
      element.scrollIntoView({
        behavior: 'smooth'
      });
    }
  }
}

<ul>
  <li @click="scrollTo('#section1')">Section 1</li>
  <li @click="scrollTo('#section2')">Section 2</li>
</ul>

节流优化性能

滚动事件触发频繁，使用节流函数优化性能。Lodash的_.throttle或手动实现节流，减少事件处理函数的执行频率。

import { throttle } from 'lodash';

methods: {
  handleScroll: throttle(function() {
    this.isScrolled = window.scrollY > 0;
  }, 100)
}

响应式设计考虑

针对移动设备优化导航滚动行为。通过媒体查询或检测设备类型，调整滚动阈值或效果，确保在移动端有良好的用户体验。

@media (max-width: 768px) {
  nav.scrolled {
    padding: 10px 0;
  }
}