瀑布流整屏切 -用于首页 vue（学习记录与分享）

这次的新项目要求是实现瀑布流整屏切，之前没有做过，想去网上找找资料，发现也没有讲述怎么做的，于是自己试着做了一下，做一下学习记录和分享一下思路。如果有哪一块做错了，或者没有考虑周全的地方，欢迎大家指正

首先准备三个页高大盒子

  <div class="pubu">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box three"></div>
  </div>

去除滚动条

body::-webkit-scrollbar {
  display: none;
}

在monted记录页高和两个时间用于节流使用。挂载鼠标滚动事件的监听。

    this.HtmlHight = window.innerHeight; //页高
    this.nowTime = Date.now(); //现在时间
    this.lastTime = this.nowTime; //最后一次成功触发的时间
    window.addEventListener("DOMMouseScroll", this.scrollFunction, false);
    window.addEventListener("mousewheel", this.scrollFunction, {
      passive: false,
    });

滚动事件回调函数scrollFunction()如下；

    scrollFunction(e) {
      e = e || window.event;
      e.preventDefault && e.preventDefault(); //禁止浏览器默认事件
      if (e.wheelDelta) {
        this.nowTime = Date.now();
        //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) {
          //当滑轮向上滚动时
          if (this.nowTime - this.lastTime > 500) {//节流
            if (this.page > 0) {
              this.page--;
              this.scrollSmoothTo(this.page * this.HtmlHight);
              console.log(this.page * this.HtmlHight);
              // 记录上一次函数触发的时间
              this.lastTime = this.nowTime;
            }
          }
        }
        if (e.wheelDelta < 0) {
            //当滑轮向下滚动时
          if (this.nowTime - this.lastTime > 500) {
            if (this.page < 2) {
              this.page++;
              this.scrollSmoothTo(this.page * this.HtmlHight);
              console.log(this.page * this.HtmlHight);
              // 记录上一次函数触发的时间
              this.lastTime = this.nowTime;
            }
          }
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        if (e.detail > 0) {
          //当滑轮向上滚动时
        }
        if (e.detail < 0) {
          //当滑轮向下滚动时
        }
      }
    }

e.preventDefault && e.preventDefault()阻止滚动默认行为。其中scrollSmoothTo方法为缓动，代码如下

    scrollSmoothTo(position) {
      if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
          return setTimeout(callback, 20);
        };
      }
      // 当前滚动高度
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动step方法
      var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 10;
        if (Math.abs(distance) < 1) {
          window.scrollTo(0, position);
        } else {
          window.scrollTo(0, scrollTop);
          requestAnimationFrame(step);
        }
      };
      step();
    }

整个vue组件代码如下

<template>
  <div class="pubu">
    <div class="box one"></div>
    <div class="box two"></div>
    <div class="box three"></div>
  </div>
</template>

<script>
export default {
  name: "textdemo",
  data() {
    return {
      isanimated: false,
      height: 0,
      HtmlHight: 0,
      nowTime: null,
      lastTime: null,
      page: 0,
    };
  },
  props: {
  },
  methods: {
    scrollFunction(e) {
      e = e || window.event;
      e.preventDefault && e.preventDefault(); //禁止浏览器默认事件
      if (e.wheelDelta) {
        this.nowTime = Date.now();
        //判断浏览器IE，谷歌滑轮事件
        if (e.wheelDelta > 0) {
          //当滑轮向上滚动时
          if (this.nowTime - this.lastTime > 500) {//节流
            if (this.page > 0) {
              this.page--;
              this.scrollSmoothTo(this.page * this.HtmlHight);
              console.log(this.page * this.HtmlHight);
              this.height = this.HtmlHight + document.documentElement.scrollTop;
              console.log(this.height);
              // 记录上一次函数触发的时间
              this.lastTime = this.nowTime;
              console.log(1);
            }
          }
        }
        if (e.wheelDelta < 0) {
            //当滑轮向下滚动时
          if (this.nowTime - this.lastTime > 500) {
            if (this.page < 2) {
              this.page++;
              this.scrollSmoothTo(this.page * this.HtmlHight);
              console.log(this.page * this.HtmlHight);
              this.height = this.HtmlHight + document.documentElement.scrollTop;
              console.log(this.height);
              // 记录上一次函数触发的时间
              this.lastTime = this.nowTime;
              console.log(1);
            }
          }
        }
      } else if (e.detail) {
        //Firefox滑轮事件
        if (e.detail > 0) {
          //当滑轮向上滚动时
          console.log(3);
        }
        if (e.detail < 0) {
          //当滑轮向下滚动时
          console.log(4);
        }
      }
    },
    //匀速滚动<br>
    scrollSmoothTo(position) {
      if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function (callback, element) {
          return setTimeout(callback, 20);
        };
      }
      // 当前滚动高度
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      // 滚动step方法
      var step = function () {
        // 距离目标滚动距离
        var distance = position - scrollTop;
        // 目标滚动位置
        scrollTop = scrollTop + distance / 10;
        if (Math.abs(distance) < 1) {
          window.scrollTo(0, position);
        } else {
          window.scrollTo(0, scrollTop);
          requestAnimationFrame(step);
        }
      };
      step();
    },
  },
  mounted() {
    this.HtmlHight = window.innerHeight; //页高
    this.nowTime = Date.now(); //现在时间
    this.lastTime = this.nowTime; //最后一次成功触发的时间
    window.addEventListener("DOMMouseScroll", this.scrollFunction, false);
    window.addEventListener("mousewheel", this.scrollFunction, {
      passive: false,
    });
  },
};
</script>

<style lang="scss">
@import "./index.css";
.box {
  height: 100vh;
  width: 100vw;
}
.one {
}
.two {
  background-color: red;
}
.three {
  background-color: blue;
}
</style>