vue实现全屏滚动效果（非fullpage.js）

Vue.js 是一款流行的前端框架，用于构建用户界面。在 Vue 中实现全屏滚动效果，意味着创建一个滚动容器，使得每个页面元素（section）都占据整个屏幕，并且在用户滚动时平滑过渡到下一个页面。本篇文章将详细介绍如何在不依赖 fullpage.js 库的情况下，使用 Vue 实现这一功能。 我们需要理解实现全屏滚动的关键点： 1. **页面布局**：每个页面（section）应该完全填充屏幕的高度，确保它们之间无缝切换。这可以通过 CSS 样式实现。 2. **事件监听**：监听用户的滚动行为，通常是通过 `mousewheel` 和 `DOMMouseScroll` 事件来检测鼠标滚轮的滚动。 3. **滚动逻辑**：当用户滚动时，更新页面位置，使当前页面平滑移动到下一个或上一个页面。 4. **状态管理**：使用变量跟踪当前显示的页面和是否正在滚动，防止滚动操作的冲突。 接下来，我们分析给出的代码实现： HTML 部分： ```html <template> <div class="fullPage" ref="fullPage"> <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle" > <div class="section section1">1</div> <div class="section section2">2</div> <div class="section section3">3</div> <div class="section section4">4</div> </div> </div> </template> ``` 这段 HTML 创建了一个名为 `.fullPage` 的全屏容器，其中包含一个 `.fullPageContainer`，这个容器会进行平滑滚动。每个 `.section` 类的元素代表一个全屏页面。 JavaScript 部分： ```javascript export default { name: "Home", data() { return { fullpage: { current: 1, // 当前的页面编号 isScrolling: false, // 是否在滚动 deltaY: 0 // 鼠标滚动事件的vertical scroll amount } }; }, methods: { // ... }, // ... }; ``` 这里定义了 Vue 组件的数据对象，包括当前页面编号 `current`、滚动状态 `isScrolling` 和滚动量 `deltaY`。 在 `methods` 对象中，有以下几个关键方法： - `next()` 和 `pre()` 分别用于切换到下一页和上一页，根据当前页面编号更新，并调用 `move()` 方法进行平滑滚动。 - `move(index)` 方法用于更新滚动状态并执行实际的滚动动作，通过 `directToMove(index)` 计算滚动距离并设置 `transform` 样式。 - `directToMove(index)` 用于计算滚动高度，然后设置 `fullPageContainer` 的 `transform` 属性，使得页面平滑移动到指定位置。 - `mouseWheelHandle(event)` 方法监听鼠标滚轮事件，计算滚动方向并调用相应的切换方法。 CSS 部分虽然没有提供，但通常需要以下样式： ```css .fullPage { height: 100vh; /* 设置全屏高度 */ overflow: hidden; /* 隐藏滚动条 */ } .fullPageContainer { position: relative; /* 以便子元素可以绝对定位 */ height: 100%; /* 保持与全屏容器相同的高度 */ } .section { position: absolute; /* 允许每个section占据全屏 */ width: 100%; height: 100%; transition: transform 1s; /* 添加平滑过渡效果 */ } ``` 总结起来，实现 Vue 全屏滚动效果的关键在于监听滚动事件，更新页面状态，并使用 CSS3 的 `transform` 属性平滑过渡页面。这种实现方式允许开发者自定义滚动行为，同时避免引入额外的库，提高项目的灵活性和性能。通过以上代码，你可以创建一个基本的全屏滚动页面，可以根据需求扩展功能，如添加导航按钮、动态加载内容等。