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 相关文章推荐
iframe子页面与父页面在同域或不同域下的js通信
May 07 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
Aug 01 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
jquery获取及设置outerhtml的方法
Mar 09 Javascript
js实现图片无缝滚动特效
Mar 19 Javascript
基于AngularJS+HTML+Groovy实现登录功能
Feb 17 Javascript
JavaScript资源预加载组件和滑屏组件的使用推荐
Mar 10 Javascript
BootStrap 动态表单效果
Jun 02 Javascript
Canvas实现微信红包照片效果
Aug 21 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
Vue 实现html中根据类型显示内容
Oct 28 Javascript
QT与javascript交互数据的实现
May 26 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和ACCESS写聊天室(四)
2006/10/09 PHP
php去除重复字的实现代码
2011/09/16 PHP
解决FireFox下[使用event很麻烦]的问题
2006/11/26 Javascript
Javascript 判断 object 的特定类转载
2007/02/01 Javascript
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
JQuery小知识
2010/10/15 Javascript
jquery js 重置表单 reset()具体实现代码
2013/08/05 Javascript
引用外部脚本时script标签关闭的写法
2014/01/20 Javascript
Document.location.href和.replace的区别示例介绍
2014/03/04 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
Vue 仿百度搜索功能实现代码
2017/02/16 Javascript
COM组件中调用JavaScript函数详解及实例
2017/02/23 Javascript
详解Vue生命周期的示例
2017/03/10 Javascript
微信小程序scroll-view仿拼多多横向滑动滚动条
2020/04/21 Javascript
Vue.js中 v-model 指令的修饰符详解
2018/12/03 Javascript
详解jQuery中的prop()使用方法
2020/01/05 jQuery
Vue实现菜单切换功能
2020/11/08 Javascript
Python Web框架Flask信号机制(signals)介绍
2015/01/01 Python
简单上手Python中装饰器的使用
2015/07/12 Python
Python的Flask框架标配模板引擎Jinja2的使用教程
2016/07/12 Python
python 矩阵增加一行或一列的实例
2018/04/04 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python 回溯法模板详解
2020/02/26 Python
草莓网美国官网:Strawberrynet USA
2016/12/11 全球购物
台湾时尚彩瞳专门店:imeime
2019/08/16 全球购物
SQL Server面试题
2016/10/17 面试题
工作过失检讨书
2014/02/23 职场文书
竞争上岗实施方案
2014/03/21 职场文书
三好学生演讲稿范文
2014/04/26 职场文书
岗位职责说明书模板
2014/07/30 职场文书
农村文化活动总结
2014/08/28 职场文书
在职人员跳槽求职信
2015/03/20 职场文书
焦点访谈观后感
2015/06/11 职场文书
python urllib库的使用详解
2021/04/13 Python