滑动一整屏

需求：用户通过鼠标滚轮滑动的时候一整屏进行翻页。

参考网站效果

微派网络

实现思路：

1.首先我们需获取可视区域的高度

document.documentElement.clientHeight;

2.根据动态设置top属性即可进行翻页。

3.需判断上滑还是下滑

根据onmousewheel滚轮事件即可判断,开始时间为当前时间，结束时间为事件结束以后当时间，若是差值为负数到一定区间，即可判断为向上滑动，否则为向下滑动。

注意点：

我们需通过onresize缩放来监听当前的可视窗口的高度。并且每次把当前窗口的值修改到显示区域，同时top值也需进行修改。

比如我们在第二屏幕的时候，每次改变的时候我会动态生成一个数组，并且滑动的时候，是会改变其页数的，因此我可以根据页数和高度数组进而来改变其top值。

代码展示

<template>
  <div id="wrap" :style="[{ height: `${clientHeight}px` }]"> 
    <div id="main" :style="{ top: `${topHeight}px` }">
      <div class="page" :style="{ height: `${clientHeight}px` }">
          1
      </div>
      <div class="page" :style="{ height: `${clientHeight}px` }">
          2
      </div>
      <div class="page" :style="{ height: `${clientHeight}px` }">
          3
      </div>
      <div class="page" :style="{ height: `${clientHeight}px` }">
          4
      </div>
      <div class="page" :style="{ height: `${clientHeight}px` }">
          5
      </div>
    </div>
    <view class="pagination">
      <view class="circle" v-for="v in maxCount" :key="v" :class="{ 'active':currentIdx == v }" @click="gotoPage(v)"></view>
    </view>
  </div>
</template>
  
<script>
export default {
  name: 'homeIndex',
  components: {
  },
  data() {
    return {
      clientHeight: 0,
      topHeight: 0,
      heightArr:[],
      currentIdx: 1,
      maxCount: 5,
    }
  },
  mounted() {
    this.clientHeight = document.documentElement.clientHeight;
    this.getHeightArr();
    this.getMouseEvent();
    window.onresize = () => {
      return (() => {
        this.clientHeight = document.documentElement.clientHeight;
        this.getHeightArr();
      })()
    }
  },
  methods: {
    getHeightArr(){
      let maxCount = this.maxCount;
      let heightArr = [];
      var height = this.clientHeight;
      for(let i = 0; i < maxCount; i++){
        let currentHeight = `-${height*i}`;
        heightArr.push(currentHeight)
      }
      this.heightArr = heightArr;
      this.topHeight = this.heightArr[this.currentIdx-1];
      
    },
    getMouseEvent() {
      let that = this;
      var startTime = 0;
      var endTime = 0;
      var now = 0;
      var height = this.clientHeight;
      var main = document.getElementById("main");
      window.onmousewheel = function (e) {
        height = that.clientHeight;
        startTime = new Date().getTime();
        now = Number(that.heightArr[that.currentIdx-1]);
        if (endTime - startTime < -600) {
          //鼠标向上移动
          if (e.wheelDelta > 0 && parseInt(main.offsetTop) < 0) {
            now = now + height;
            //鼠标向下移动
          } else if (e.wheelDelta < 0 && parseInt(main.offsetTop) + (height * 4) > 0) {
            now = now - height;
          }
          setTimeout(() => {
              that.topHeight = now;
              let currentIdx = 1;
              if(that.heightArr && that.heightArr.length > 0){
                let idx = that.heightArr.findIndex((item)=>{
                  return item == now;
                })
                currentIdx = idx+1;
              }
              that.currentIdx = currentIdx;
              that.$emit('get-home-scroll-idx',currentIdx)
            }, 20);
          endTime = startTime;
        }
      }
    },
    gotoPage(page){
      this.currentIdx = page;
      setTimeout(() => {
        this.topHeight = this.heightArr[page-1];
      })
    }
  }
}
</script>
  
<style lang="scss" scoped>
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

#wrap {
  overflow: hidden;
}

#main {
  position: relative;
  top: 0;
  transition: 0.5s;
}

.page {
  width: 100%;
}
.pagination{
  position: fixed;
  right: 1.5%;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9;
  display: flex;
  flex-direction: column;
  .circle{
    width: 10px;
    height: 10px;
    display: block;
    margin-top: 10px;
    background: rgba(236,68,39,0.4);
    border-radius: 50%;
    cursor: pointer;
    &.active{
      height: 40px;
      border-radius: 12px;
      background: #EC4427;
    }
  }
}
</style>