VUE屏幕整体滚动(滑动或滚轮)原生方法举例

更新时间：2024年01月09日 11:19:50 作者：YIGE_MO

为了实现全屏滚动效果,我们首先需要使用Vue.js框架搭建项目,这篇文章主要给大家介绍了关于VUE屏幕整体滚动(滑动或滚轮)原生方法的相关资料,需要的朋友可以参考下

前言

一年嗖的一下儿就过去了，最近几年很流行搞年终总结，因此也研究了一下相关的内容，主要记录一下手机端与电脑端分辨通过滑动与滚轮使得整个屏幕滚动的效果

一、基础函数

不论是使用滑动还是滚轮的方式基础的转换逻辑是相通的

1、页面部分

首先完成页面部分的搭建，@mousewheel、@DOMMouseScroll主要是为了监听滚轮的事件。@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; //一定要设置，保证占满
  overflow: hidden; //一定要设置，多余的先隐藏
  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>

2、页面切换使用的函数

全局变量

 data() {
    return {
      fullpage: {
        current: 1, // 当前的页面编号
        isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
        deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
      },
      startTime: undefined, // 记录触摸开始的时间
      startX: undefined, // 记录触摸开始的X坐标，本次主要实现的是上下滑动，所以当前坐标不做强制要求
      startY: undefined, // 记录触摸开始的Y坐标
    };
  },

实际的滚动方法

	// 滚动事件
    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;
    }

上下切换事件

	// 往下切换
    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);// 执行切换
      }
    },

二、鼠标的滚轮控制实现切换

 	// 监听鼠标监听
    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();
      }
    },

三、移动端触摸实现切换

触摸事件相当于滚动事件来说更为复杂，首先要移除手指滑动时对屏幕的影响，否则很容易出现白边，影响视觉效果。然后需要记录移动的距离是否有效，移动的事件是否过长等等…

// 清除触摸事件
    handleTouchmove(event) {
      event.preventDefault()
    },
    //手指按下屏幕
    handleTouchstart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    //手指离开屏幕
    handleTouchend(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      //判断按下的时长
      if (endTime - this.startTime > 2000) {
        return
      }
      //滑动的方向
      let direction = "";
      //先判断用户滑动的距离，是否合法，合法:判断滑动的方向 注意 距离要加上绝对值
      if (Math.abs(endY - this.startY) > 10) {
        //滑动方向
        direction = endY - this.startY > 0 ? "down" : "up"
      } else {
        return
      }
      //用户做了合法的滑动操作
      // console.log('方向'+direction)
      if (direction === 'up') {
        this.next();
      }
      if (direction === 'down') {
        this.pre();
      }
    }

总结

最后，将全部页面文件贴一下，方便大家搬运.

<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, // 当前的页面编号
        isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
        deltaY: 0 // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
      },
      startTime: undefined, // 记录触摸开始的时间
      startX: undefined, // 记录触摸开始的X坐标，本次主要实现的是上下滑动，所以当前坐标不做强制要求
      startY: undefined, // 记录触摸开始的Y坐标
    };
  },
  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();
      }
    },
    // 清除触摸事件
    handleTouchmove(event) {
      event.preventDefault()
    },
    //手指按下屏幕
    handleTouchstart(event) {
      this.startTime = Date.now()
      this.startX = event.changedTouches[0].clientX
      this.startY = event.changedTouches[0].clientY
    },
    //手指离开屏幕
    handleTouchend(event) {
      const endTime = Date.now()
      const endX = event.changedTouches[0].clientX
      const endY = event.changedTouches[0].clientY
      //判断按下的时长
      if (endTime - this.startTime > 2000) {
        return
      }
      //滑动的方向
      let direction = "";
      //先判断用户滑动的距离，是否合法，合法:判断滑动的方向 注意 距离要加上绝对值
      if (Math.abs(endY - this.startY) > 10) {
        //滑动方向
        direction = endY - this.startY > 0 ? "down" : "up"
      } else {
        return
      }
      //用户做了合法的滑动操作
      // console.log('方向'+direction)
      if (direction === 'up') {
        this.next();
      }
      if (direction === 'down') {
        this.pre();
      }
    }
  }
};
</script>
<style scoped lang="scss">
.fullPage {
  height: 100vh; //一定要设置，保证占满
  overflow: hidden; //一定要设置，多余的先隐藏
  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>

总结

到此这篇关于VUE屏幕整体滚动(滑动或滚轮)原生方法的文章就介绍到这了,更多相关VUE屏幕整体滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

vue引入jquery时报错 $ is not defined的问题及解决
这篇文章主要介绍了vue引入jquery时报错 $ is not defined的问题及解决，具有很好的参考价值，希望对大家有所帮助。
2022-09-09
Vue重定向redirect的三种写法总结
这篇文章主要介绍了Vue重定向redirect的三种写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2025-06-06
vue如何导出json数据为excel表格并保存到本地
这篇文章主要介绍了vue如何导出json数据为excel表格并保存到本地问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-07-07
vue 限制input只能输入正数的操作
这篇文章主要介绍了vue 限制input只能输入正数的操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-08-08
vue全局数据管理示例详解
这篇文章主要为大家介绍了vue全局数据管理示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2022-07-07
vuex中能直接修改state吗
当我们使用vuex的时候，时不时能看到“更改Vuex中的store中的状态唯一办法就是提交mutations”，但是有没有试想过，我们不提交mutations其实也能修改state的值？答案是可以的，下面通过本文介绍下vuex修改state值的方法，感兴趣的朋友一起看看吧
2022-11-11
vue 倒计时结束跳转页面实现代码
在商场大家经常看到停车收费倒计时支付页面,今天小编通过本文给大家分享vue 倒计时结束跳转页面功能,感兴趣的朋友一起看看吧
2023-10-10
Vue路由传参props解耦的三种方式小结
这篇文章主要介绍了Vue路由传参props解耦的三种方式小结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-12-12
elementUI 动态生成几行几列的方法示例
这篇文章主要介绍了elementUI 动态生成几行几列的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-07-07
Vue使用el-upload批量上传图片时报错问题处理方法
相信大家都知道在element-ui中,el-upload可以进行文件多选操作,下面这篇文章主要给大家介绍了关于Vue使用el-upload批量上传图片时报错问题的处理方法,文中通过图文以及实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06