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+js实现微信上传图片选择功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
现在前端开发中需要通过Ajax发送请求获取后端数据是很普遍的一件事情了,下面这篇文章主要介绍了关于axios配置请求头content-type的相关资料,需要的朋友可以参考下2022-04-04
解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected&n
这篇文章介绍了解决VUE项目在IIS部署出现：Uncaught SyntaxError: Unexpected token ＜ 报错的方法，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
本文主要介绍了vue项目proxyTable配置小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-04-04
五步教你用Nginx部署Vue项目及解决动态路由刷新404问题
nginx 是一个代理的服务器,下面这篇文章主要给大家介绍了关于如何通过五步教你用Nginx部署Vue项目及解决动态路由刷新404问题的相关资料,文中通过图文介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue项目中swiper轮播active图片实现居中并放大方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要为大家详细介绍了vue+element实现输入密码锁屏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-03-03
中秋节快要到啦,我们一起用Vue创建一个简单的连连看游戏,连连看大家一定都玩过吧,通过消除相同的图案来清理棋盘,小编将一步步引导大家完成整个游戏的制作过程,让我们开始吧,一起为中秋节增添一些互动和娱乐2023-09-09
这篇文章主要介绍了解决vue单页面应用进入页面加载所有 js 的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要介绍了vue+swiper实现左右滑动的测试题功能,本文通过实例代码给大介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-10-10
最新评论