欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-07 23:04:38
本文实例为大家分享了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>

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