我们永远不能怪罪任何帮了倒忙的志愿者。他们是一心对你好，别让他们心凉。相信自已。不要妄加评判自已，也不会把自已交给别人评判，更不会贬低自已。
本文实例为大家分享了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的元素
let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
scrollHeight= -(index - 1) * height + "px";
scrollPage.style.transform = `translateY(${scrollHeight})`;
this.fullpage.current = index;
},
mouseWheelHandle(event) { // 监听鼠标监听
// 添加冒泡阻止
let evt = event || window.event;
if (evt.stopPropagation) {
evt.stopPropagation();
} else {
evt.returnValue = false;
}
if (this.fullpage.isScrolling) { // 判断是否可以滚动
return false;
}
let e = event.originalEvent || event;
this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
if (this.fullpage.deltaY > 0) {
this.next();
} else if (this.fullpage.deltaY < 0) {
this.pre();
}
}
}
};
</script>
CSS
<style scoped>
.fullPage{
height: 100%;//一定要设置，保证占满
overflow: hidden;//一定要设置，多余的先隐藏
background-color: rgb(189, 211, 186);
}
.fullPageContainer{
width: 100%;
height: 100%;
transition: all linear 0.5s;
}
.section {
width: 100%;
height: 100%;
background-position: center center;
background-repeat: no-repeat;
}
.section1 {
background-color: rgb(189, 211, 186);
background: url("./assets/intro-bg.jpg");
}
.section1 .secction1-content {
color: #fff;
text-align: center;
position: absolute;
top: 40%;
right: 0;
left: 0;
}
.secction1-content h1 {
font-size: 40px;
padding-bottom: 30px;
}
.secction1-content p {
font-size: 20px;
}
.section2 {
background-color: rgb(44, 48, 43);
}
.section3 {
background-color: rgb(116, 104, 109);
}
.section4 {
background-color: rgb(201, 202, 157);
}
</style>
到此这篇关于vue如何实现全屏滚动效果（非fullpage.javascript）就介绍到这了。我们为人做事，切勿处处求全责备样样希求精通，要充分认识自己和自已所从事的工作，客观地分析问题，珍惜自己的拥有，一步一个脚印向前走。更多相关vue如何实现全屏滚动效果（非fullpage.javascript）内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
