vue實現(xiàn)全屏滾動效果（非fullpage.js）

更新時間：2020年03月07日 12:38:51 作者：coder-syl

這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)全屏滾動效果，非fullpage.js，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue實現(xiàn)全屏滾動效果（的具體代碼，供大家參考，具體內(nèi)容如下

是什么

網(wǎng)頁的一個頁面占據(jù)一屏的寬高，多個頁面上下或者左右拼接在一起。當(dāng)滑動鼠標(biāo)滾輪，或點擊導(dǎo)航按鈕時，可以平滑到對應(yīng)的頁面。

此次只實現(xiàn)鼠標(biāo)滾動

實現(xiàn)原理

使用mousewheel , DOMMouseScroll(火狐用)監(jiān)聽鼠標(biāo)滾動事件，當(dāng)鼠標(biāo)上下的滾動的時候，當(dāng)前的頁面transformY(屏高)或者transformX(屏寬)

代碼實現(xiàn)

HTML

<template>
 <div class="fullPage" ref="fullPage">
 <div
  class="fullPageContainer"
  ref="fullPageContainer"
  @mousewheel="mouseWheelHandle" //監(jiān)聽鼠標(biāo)事件
  @DOMMouseScroll="mouseWheelHandle" // 監(jiān)聽鼠標(biāo)事件
 >
  <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, // 當(dāng)前的頁面編號
  isScrolling: false, // 是否在滾動,是為了防止?jié)L動多頁，需要通過一個變量來控制是否滾動
  deltaY: 0 // 返回鼠標(biāo)滾輪的垂直滾動量，保存的鼠標(biāo)滾動事件的deleteY,用來判斷是往下還是往上滾
  }
 };
 },
 methods: {
 next() { // 往下切換
  let len = 4; // 頁面的個數(shù)
  if (this.fullpage.current + 1 <= len) { // 如果當(dāng)前頁面編號+1 小于總個數(shù)，則可以執(zhí)行向下滑動
  this.fullpage.current += 1; // 頁面+1
  this.move(this.fullpage.current); // 執(zhí)行切換
  }
 },
 pre() {// 往上切換
  if (this.fullpage.current - 1 > 0) { // 如果當(dāng)前頁面編號-1 大于0，則可以執(zhí)行向下滑動
  this.fullpage.current -= 1;// 頁面+1
  this.move(this.fullpage.current);// 執(zhí)行切換
  }
 },
 move(index) {
  this.fullpage.isScrolling = true; // 為了防止?jié)L動多頁，需要通過一個變量來控制是否滾動
  this.directToMove(index); //執(zhí)行滾動
  setTimeout(() => {  //這里的動畫是1s執(zhí)行完，使用setTimeout延遲1s后解鎖
  this.fullpage.isScrolling = false;
  }, 1010);
 },
 directToMove(index) {
  let height = this.$refs["fullPage"].clientHeight; //獲取屏幕的寬度
  let scrollPage = this.$refs["fullPageContainer"]; // 獲取執(zhí)行tarnsform的元素
  let scrollHeight; // 計算滾動的告訴，是往上滾還往下滾
  scrollHeight= -(index - 1) * height + "px";
  scrollPage.style.transform = `translateY(${scrollHeight})`;
  this.fullpage.current = index;
 },
 mouseWheelHandle(event) { // 監(jiān)聽鼠標(biāo)監(jiān)聽
  // 添加冒泡阻止
  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%;//一定要設(shè)置，保證占滿
 overflow: hidden;//一定要設(shè)置，多余的先隱藏
 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: