快捷導(dǎo)航

VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法舉例

更新時(shí)間：2024年01月09日 11:19:50 作者：YIGE_MO

為了實(shí)現(xiàn)全屏滾動(dòng)效果,我們首先需要使用Vue.js框架搭建項(xiàng)目,這篇文章主要給大家介紹了關(guān)于VUE屏幕整體滾動(dòng)(滑動(dòng)或滾輪)原生方法的相關(guān)資料,需要的朋友可以參考下

前言

一年嗖的一下兒就過(guò)去了，最近幾年很流行搞年終總結(jié)，因此也研究了一下相關(guān)的內(nèi)容，主要記錄一下手機(jī)端與電腦端分辨通過(guò)滑動(dòng)與滾輪使得整個(gè)屏幕滾動(dòng)的效果

一、基礎(chǔ)函數(shù)

不論是使用滑動(dòng)還是滾輪的方式基礎(chǔ)的轉(zhuǎn)換邏輯是相通的

1、頁(yè)面部分

首先完成頁(yè)面部分的搭建，@mousewheel、@DOMMouseScroll主要是為了監(jiān)聽(tīng)滾輪的事件。@touchstart、@touchend、@touchmove為觸摸事件。

<template>
  <div class="fullPage" ref="fullPage">
    <div
        class="fullPageContainer"
        ref="fullPageContainer"
        @mousewheel="mouseWheelHandle"
        @DOMMouseScroll="mouseWheelHandle"
        @touchstart="handleTouchstart"
        @touchend="handleTouchend"
        @touchmove="handleTouchmove"
    >
      <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>

<style scoped lang="scss">
.fullPage {
  height: 100vh; //一定要設(shè)置，保證占滿
  overflow: hidden; //一定要設(shè)置，多余的先隱藏
  background-color: rgb(189, 211, 186);
}

.fullPageContainer {
  width: 100%;
  height: 100vh;
  transition: all linear 0.5s;
}

.section {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
}

//下面的只是為了區(qū)分每個(gè)頁(yè)面的背景顏色
.section1 {
  background-color: rgb(189, 211, 186);
}

.section2 {
  background-color: rgb(44, 48, 43);
}

.section3 {
  background-color: rgb(116, 104, 109);
}

.section4 {
  background-color: rgb(201, 202, 157);
}
</style>

2、頁(yè)面切換使用的函數(shù)

全局變量

 data() {
    return {
      fullpage: {
        current: 1, // 當(dāng)前的頁(yè)面編號(hào)
        isScrolling: false, // 是否在滾動(dòng),是為了防止?jié)L動(dòng)多頁(yè)，需要通過(guò)一個(gè)變量來(lái)控制是否滾動(dòng)
        deltaY: 0 // 返回鼠標(biāo)滾輪的垂直滾動(dòng)量，保存的鼠標(biāo)滾動(dòng)事件的deleteY,用來(lái)判斷是往下還是往上滾
      },
      startTime: undefined, // 記錄觸摸開(kāi)始的時(shí)間
      startX: undefined, // 記錄觸摸開(kāi)始的X坐標(biāo)，本次主要實(shí)現(xiàn)的是上下滑動(dòng)，所以當(dāng)前坐標(biāo)不做強(qiáng)制要求
      startY: undefined, // 記錄觸摸開(kāi)始的Y坐標(biāo)
    };
  },

實(shí)際的滾動(dòng)方法

	// 滾動(dòng)事件
    move(index) {
      this.fullpage.isScrolling = true; // 為了防止?jié)L動(dòng)多頁(yè)，需要通過(guò)一個(gè)變量來(lái)控制是否滾動(dòng)
      this.directToMove(index); //執(zhí)行滾動(dòng)
      setTimeout(() => {  //這里的動(dòng)畫(huà)是1s執(zhí)行完，使用setTimeout延遲1s后解鎖
        this.fullpage.isScrolling = false;
      }, 1010);
    },
	// 執(zhí)行滾動(dòng)
    directToMove(index) {
      let height = this.$refs["fullPage"].clientHeight; //獲取屏幕的寬度
      let scrollPage = this.$refs["fullPageContainer"]; // 獲取執(zhí)行tarnsform的元素
      let scrollHeight; // 計(jì)算滾動(dòng)的告訴，是往上滾還往下滾
      scrollHeight = -(index - 1) * height + "px";
      scrollPage.style.transform = `translateY(${scrollHeight})`;
      this.fullpage.current = index;
    }

上下切換事件

	// 往下切換
    next() {
      let len = 4; // 頁(yè)面的個(gè)數(shù)
      if (this.fullpage.current + 1 <= len) { // 如果當(dāng)前頁(yè)面編號(hào)+1 小于總個(gè)數(shù)，則可以執(zhí)行向下滑動(dòng)
        this.fullpage.current += 1; // 頁(yè)面+1
        this.move(this.fullpage.current); // 執(zhí)行切換
      }
    },
    // 往上切換
    pre() {
      if (this.fullpage.current - 1 > 0) { // 如果當(dāng)前頁(yè)面編號(hào)-1 大于0，則可以執(zhí)行向下滑動(dòng)
        this.fullpage.current -= 1;// 頁(yè)面+1
        this.move(this.fullpage.current);// 執(zhí)行切換
      }
    },

二、鼠標(biāo)的滾輪控制實(shí)現(xiàn)切換

 	// 監(jiān)聽(tīng)鼠標(biāo)監(jiān)聽(tīng)
    mouseWheelHandle(event) {
      // 添加冒泡阻止
      let evt = event || window.event;
      if (evt.stopPropagation) {
        evt.stopPropagation();
      } else {
        evt.returnValue = false;
      }
      if (this.fullpage.isScrolling) { // 判斷是否可以滾動(dòng)
        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();
      }
    },

三、移動(dòng)端觸摸實(shí)現(xiàn)切換

觸摸事件相當(dāng)于滾動(dòng)事件來(lái)說(shuō)更為復(fù)雜，首先要移除手指滑動(dòng)時(shí)對(duì)屏幕的影響，否則很容易出現(xiàn)白邊，影響視覺(jué)效果。然后需要記錄移動(dòng)的距離是否有效，移動(dòng)的事件是否過(guò)長(zhǎng)等等…

// 清除觸摸事件
    handleTouchmove(event) {
      event.preventDefault()
    },
    //手指按下屏幕
    handleTouchstart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    //手指離開(kāi)屏幕
    handleTouchend(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      //判斷按下的時(shí)長(zhǎng)
      if (endTime - this.startTime > 2000) {
        return
      }
      //滑動(dòng)的方向
      let direction = "";
      //先判斷用戶滑動(dòng)的距離，是否合法，合法:判斷滑動(dòng)的方向 注意 距離要加上絕對(duì)值
      if (Math.abs(endY - this.startY) > 10) {
        //滑動(dòng)方向
        direction = endY - this.startY > 0 ? "down" : "up"
      } else {
        return
      }
      //用戶做了合法的滑動(dòng)操作
      // console.log('方向'+direction)
      if (direction === 'up') {
        this.next();
      }
      if (direction === 'down') {
        this.pre();
      }
    }

總結(jié)

最后，將全部頁(yè)面文件貼一下，方便大家搬運(yùn).

<template>
  <div class="fullPage" ref="fullPage">
    <div
        class="fullPageContainer"
        ref="fullPageContainer"
        @mousewheel="mouseWheelHandle"
        @DOMMouseScroll="mouseWheelHandle"
        @touchstart="handleTouchstart"
        @touchend="handleTouchend"
        @touchmove="handleTouchmove"
    >
      <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>
<script>
export default {
  name: "Home",
  data() {
    return {
      fullpage: {
        current: 1, // 當(dāng)前的頁(yè)面編號(hào)
        isScrolling: false, // 是否在滾動(dòng),是為了防止?jié)L動(dòng)多頁(yè)，需要通過(guò)一個(gè)變量來(lái)控制是否滾動(dòng)
        deltaY: 0 // 返回鼠標(biāo)滾輪的垂直滾動(dòng)量，保存的鼠標(biāo)滾動(dòng)事件的deleteY,用來(lái)判斷是往下還是往上滾
      },
      startTime: undefined, // 記錄觸摸開(kāi)始的時(shí)間
      startX: undefined, // 記錄觸摸開(kāi)始的X坐標(biāo)，本次主要實(shí)現(xiàn)的是上下滑動(dòng)，所以當(dāng)前坐標(biāo)不做強(qiáng)制要求
      startY: undefined, // 記錄觸摸開(kāi)始的Y坐標(biāo)
    };
  },
  methods: {
	// 往下切換
    next() {
      let len = 4; // 頁(yè)面的個(gè)數(shù)
      if (this.fullpage.current + 1 <= len) { // 如果當(dāng)前頁(yè)面編號(hào)+1 小于總個(gè)數(shù)，則可以執(zhí)行向下滑動(dòng)
        this.fullpage.current += 1; // 頁(yè)面+1
        this.move(this.fullpage.current); // 執(zhí)行切換
      }
    },
    // 往上切換
    pre() {
      if (this.fullpage.current - 1 > 0) { // 如果當(dāng)前頁(yè)面編號(hào)-1 大于0，則可以執(zhí)行向下滑動(dòng)
        this.fullpage.current -= 1;// 頁(yè)面+1
        this.move(this.fullpage.current);// 執(zhí)行切換
      }
    },
    // 滾動(dòng)事件
    move(index) {
      this.fullpage.isScrolling = true; // 為了防止?jié)L動(dòng)多頁(yè)，需要通過(guò)一個(gè)變量來(lái)控制是否滾動(dòng)
      this.directToMove(index); //執(zhí)行滾動(dòng)
      setTimeout(() => {  //這里的動(dòng)畫(huà)是1s執(zhí)行完，使用setTimeout延遲1s后解鎖
        this.fullpage.isScrolling = false;
      }, 1010);
    },
    // 執(zhí)行滾動(dòng)
    directToMove(index) {
      let height = this.$refs["fullPage"].clientHeight; //獲取屏幕的寬度
      let scrollPage = this.$refs["fullPageContainer"]; // 獲取執(zhí)行tarnsform的元素
      let scrollHeight; // 計(jì)算滾動(dòng)的告訴，是往上滾還往下滾
      scrollHeight = -(index - 1) * height + "px";
      scrollPage.style.transform = `translateY(${scrollHeight})`;
      this.fullpage.current = index;
    },
    // 監(jiān)聽(tīng)鼠標(biāo)監(jiān)聽(tīng)
    mouseWheelHandle(event) {
      // 添加冒泡阻止
      let evt = event || window.event;
      if (evt.stopPropagation) {
        evt.stopPropagation();
      } else {
        evt.returnValue = false;
      }
      if (this.fullpage.isScrolling) { // 判斷是否可以滾動(dòng)
        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();
      }
    },
    // 清除觸摸事件
    handleTouchmove(event) {
      event.preventDefault()
    },
    //手指按下屏幕
    handleTouchstart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    //手指離開(kāi)屏幕
    handleTouchend(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      //判斷按下的時(shí)長(zhǎng)
      if (endTime - this.startTime > 2000) {
        return
      }
      //滑動(dòng)的方向
      let direction = "";
      //先判斷用戶滑動(dòng)的距離，是否合法，合法:判斷滑動(dòng)的方向 注意 距離要加上絕對(duì)值
      if (Math.abs(endY - this.startY) > 10) {
        //滑動(dòng)方向
        direction = endY - this.startY > 0 ? "down" : "up"
      } else {
        return
      }
      //用戶做了合法的滑動(dòng)操作
      // console.log('方向'+direction)
      if (direction === 'up') {
        this.next();
      }
      if (direction === 'down') {
        this.pre();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.fullPage {
  height: 100vh; //一定要設(shè)置，保證占滿
  overflow: hidden; //一定要設(shè)置，多余的先隱藏
  background-color: rgb(189, 211, 186);
}

.fullPageContainer {
  width: 100%;
  height: 100vh;
  transition: all linear 0.5s;
}

.section {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
}

.section1 {
  background-color: rgb(189, 211, 186);
}

.section2 {
  background-color: rgb(44, 48, 43);
}

.section3 {
  background-color: rgb(116, 104, 109);
}

.section4 {
  background-color: rgb(201, 202, 157);
}
</style>