vue实现全屏滚动效果(非fullpage.js)
作者:coder-syl 发布时间:2024-05-28 15:46:00
标签:vue,全屏滚动
本文实例为大家分享了vue实现全屏滚动效果(的具体代码,供大家参考,具体内容如下
是什么
网页的一个页面占据一屏的宽高,多个页面上下或者左右拼接在一起。当滑动鼠标滚轮,或点击导航按钮时,可以平滑到对应的页面。
此次只实现鼠标滚动
实现原理
使用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>
来源:https://blog.csdn.net/shangyanaf/article/details/103079381
0
投稿
猜你喜欢
- MySQL Shell import_table数据导入1. import_table介绍这一期我们介绍一款高效的数据导入工具,MySQL
- SQL Server在删除数据后,会重新利用这部分空间,所以如果不是空间紧张的情况下,可以不回收。回收一般先回收日志文件,因为这个回收速度非
- Python代码集体右移的方法:直接选中需要右移的代码,按tab键即可。Python中代码集体左移的方法:直接选中需要左移的代码,按shif
- 本篇阅读的代码片段来自于30-seconds-of-python(https://github.com/30-seconds...)。1.
- python编程中常用的12种基础知识总结:正则表达式替换,遍历目录方法,列表按列排序、去重,字典排序,字典、列表、字符串互转,时间对象操作
- go redis 集合操作--saddredis的go语言包,我们使用官方推荐的redigo,https://github.com/gary
- Turtle图形库Turtle 库是 Python 内置的图形化模块,属于标准库之一,位于 Python 安装目录的 lib 文件夹下,常用
- 圣诞节快到了,想着用python、r来画画圣诞树玩,就在网络上各种找方法,不喜勿喷哈~~Python1、import turtlescree
- list:Python内置的一种数据类型是列表:list。list是一种有序的集合,可以随时添加和删除其中的元素。比如,列出寝室所有室友的名
- 我们的搜索示例仍然相当地简单,特别从数据验证方面来讲;我们仅仅只验证搜索关键值是否为空。 然后许多HTML表单包含着比检测值是否为空更为复杂
- 前言:python提供了诸多的魔法方法,其中__setattr__()方法主要用于类实例进行属性赋值,其定义在Object类官方提供的说明如
- 分页查询是经常能够遇到的问题,我们首先看看分页查询存在的理由:方便用户:用户不可能一次察看所有数据,所以一页一页的翻看比较好。提高性能:一次
- 目录Blazor Server 应用程序中进行 HTTP 请求一、第三方 Web API 概览二、从 Blazor Sever 应用程序开始
- 一、前言当我们必须处理可能有多个列和行的大型DataFrames时,能够以可读格式显示数据是很重要的。这在调试代码时非常有用。默认情况下,当
- vue数据变化被watch监听处理监听当前vue文件数据例如,当前的vue文件的data中有如下属性:data() {
- 之前写了一篇flask开发环境搭建,今天继续,进行一个实战小项目-blog系统。blog系统很简单,只有一个页面,然后麻雀虽小五脏俱全。这里
- Mysql现在是大多数公司企业在用的数据库,之所以用Mysql,一点是因为Mysql是开源软件,一些有能力的公司会基于已有的Mysql架构,
- 我们知道**代表次方。如下>>>12 * 12144>>>12 ** 2144>>>a
- 今天接到测试人员反应,测试环境前端应用程序无连接mysql数据库,登录mysql服务器,查看错误日志,发现有如下报错:ERROR 1135
- 今天网页调试的时候在线订单出现错误:Server 对象 错误 'ASP 0178