vue實現全屏滾動，非fullpage.js

是什麼

網頁的一個頁面佔據一屏的寬高，多個頁面上下或者左右拼接在一起。當滑動鼠標滾輪，或點擊導航按鈕時，可以平滑到對應的頁面。

此次只實現鼠標滾動

實現原理

1. 使用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>