vue实现全屏滚动效果(非fullpage.js)


Posted in Javascript onMarch 07, 2020

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 解析Json字符串的性能比较分析代码
Dec 16 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
纯js分页代码(简洁实用)
Nov 05 Javascript
jQuery ui实现动感的圆角渐变网站导航菜单效果代码
Aug 26 Javascript
js实现新年倒计时效果
Dec 10 Javascript
JQuery给select添加/删除节点的实现代码
Apr 26 Javascript
jQuery组件easyui基本布局实现代码
Aug 25 Javascript
jQuery修改DOM结构_动力节点Java学院整理
Jul 05 jQuery
提高Node.js性能的应用技巧分享
Aug 10 Javascript
浅谈webpack对样式的处理
Jan 05 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
May 22 jQuery
npm的lock机制解析
Jun 20 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
Mar 07 #Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 #Javascript
Vue实现手机扫描二维码预览页面效果
May 28 #Javascript
微信小程序点击按钮动态切换input的disabled禁用/启用状态功能
Mar 07 #Javascript
微信小程序实现比较功能的方法汇总(五种方法)
Mar 07 #Javascript
微信小程序实现下滑到底部自动翻页功能
Mar 07 #Javascript
js实现选项卡效果
Mar 07 #Javascript
You might like
php比较多维数组中值的大小排序实现代码
2012/09/08 PHP
php函数与传递参数实例分析
2014/11/15 PHP
php版交通银行网银支付接口开发入门教程
2016/09/26 PHP
PHP 中使用explode()函数切割字符串为数组的示例
2017/05/06 PHP
php常用的工具开发整理
2019/09/26 PHP
JavaScript 脚本将当地时间转换成其它时区
2009/03/19 Javascript
jquery导航制件jquery鼠标经过变色效果示例
2013/12/05 Javascript
Javascript 高阶函数使用介绍
2015/06/15 Javascript
浅谈javascript中的constructor
2016/06/08 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
2016/06/25 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
简单快速的实现js计算器功能
2017/08/17 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
JS实现的贪吃蛇游戏完整实例
2019/01/18 Javascript
原生js添加一个或多个类名的方法分析
2019/07/30 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
[05:31]DOTA2上海特级锦标赛主赛事第三日RECAP
2016/03/05 DOTA
在Python中处理XML的教程
2015/04/29 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python 与GO中操作slice,list的方式实例代码
2017/03/20 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
在Pycharm中项目解释器与环境变量的设置方法
2018/10/29 Python
python 对字典按照value进行排序的方法
2019/05/09 Python
Python 脚本的三种执行方式小结
2019/12/21 Python
python -v 报错问题的解决方法
2020/09/15 Python
css3实现针线缝合效果(图解步骤)
2013/02/04 HTML / CSS
canvas简单连线动画的实现代码
2020/02/04 HTML / CSS
美国最好的钓鱼、狩猎和划船装备商店:Bass Pro Shops
2018/12/02 全球购物
Linux Interview Questions For software testers
2012/06/02 面试题
八年级物理教学反思
2014/01/19 职场文书
文秘自荐信
2014/06/28 职场文书
求职简历自荐信怎么写
2015/03/26 职场文书
低端且暴利的线上线下创业项目分享
2019/09/03 职场文书
css常用字体属性与背景属性介绍
2022/02/28 HTML / CSS
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android