vue实现全屏滚动效果（非fullpage.js）
120 浏览量
2020-10-15
13:47:22
上传
评论
收藏 50KB PDF 举报
vue实现全屏滚动效果（非实现全屏滚动效果（非fullpage.js））
主要为大家详细介绍了vue实现全屏滚动效果，非fullpage.js，文中示例代码介绍的非常详细，具有一定的参考
价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue实现全屏滚动效果（的具体代码，供大家参考，具体内容如下
是什么是什么
网页的一个页面占据一屏的宽高，多个页面上下或者左右拼接在一起。当滑动鼠标滚轮，或点击导航按钮时，可以平滑到对应
的页面。
此次只实现鼠标滚动此次只实现鼠标滚动
实现原理实现原理
使用mousewheel , DOMMouseScroll(火狐用)监听鼠标滚动事件，当鼠标上下的滚动的时候，当前的页面transformY(屏高)或
者transformX(屏宽)
代码实现代码实现
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>
JS
<script>
export default {
name: "Home",
data() {
return {
fullpage: {
current: 1, // 当前的页面编号
isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
}
};
},
methods: {
next() { // 往下切换
let len = 4; // 页面的个数
if (this.fullpage.current + 1 <= len) { // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
this.fullpage.current += 1; // 页面+1
this.move(this.fullpage.current); // 执行切换
}
},
pre() {// 往上切换
if (this.fullpage.current - 1 > 0) { // 如果当前页面编号-1 大于0，则可以执行向下滑动
this.fullpage.current -= 1;// 页面+1
this.move(this.fullpage.current);// 执行切换
}
},
move(index) {
this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
this.directToMove(index); //执行滚动
setTimeout(() => { //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
this.fullpage.isScrolling = false;
}, 1010);
},
directToMove(index) {
let height = this.$refs["fullPage"].clientHeight; //获取屏幕的宽度
let scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
资源评论
