是什麼
網頁的一個頁面占據一屏的寬高,多個頁面上下或者左右拼接在一起。當滑動滑鼠滾輪,或點選導航按鈕時,可以平滑到對應的頁面。
此次隻實作滑鼠滾動
實作原理
- 使用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>