全屏+底部单页面滚动

<template>
<div class="cusWrap">
    <div class="fullPage" ref="fullPage">
        <div class="fullPageContainer" ref="fullPageContainer" @mousewheel="mouseWheelHandle" @DOMMouseScroll="mouseWheelHandle">
            <div class="section section1">
                <el-image style="width: 100%; height: 100vh" :src="require('@/assets/images/customizer/bg_定制师申请@2x.png')"></el-image>
                <div class="down" @click="next()">
                    <el-image style="width: 32px; height: 32px" :src="require('@/assets/images/customizer/Group 18@2x.png')" ></el-image>
                </div>
            </div>
            <div class="section section2">
                <el-image style="width: 100%; height: 100vh" :src="require('@/assets/images/customizer/bg_qr@2x.png')"></el-image>
                <div class="mask">
                    <v-Erwei></v-Erwei>
                </div>
            </div>
           <div class="section section3" style="height: 222px;background: #ff0;" >
                <!-- <div style="height: 200px;background: #ff0;"></div> -->
                 <v-footer class="section section3"  ref="vf"></v-footer> 
            </div>
        </div>
    </div>
</div>
</template>

<script>
import vFooter from "./../../components/footer.vue";
import vErwei from "./erwei.vue";
export default {
  components: {
    vErwei,
    vFooter
  },
  data() {
    return {
      fullpage: {
        current: 1,
        isScrolling: false,
        deltaY: 0
      }
    };
  },
  mounted() {
    console.log(0);
    this.$parent.$refs.vheader.isFixed = true;
    this.$parent.$refs.vfootexr.footerVis(true);
  },
  methods: {
    next() {
      let len = 3;
      if (this.fullpage.current + 1 <= len) {
        this.fullpage.current += 1;
        this.move(this.fullpage.current);
      }
    },
    pre() {
      if (this.fullpage.current - 1 > 0) {
        this.fullpage.current -= 1;
        this.move(this.fullpage.current);
      }
    },
    move(index) {
      this.fullpage.isScrolling = true;

      this.directToMove(index);
      setTimeout(() => {
        this.fullpage.isScrolling = false;
      }, 1010);
    },
    directToMove(index) {
        
        let height = this.$refs["fullPage"].clientHeight;
        let scrollPage = this.$refs["fullPageContainer"];
        // console.log(this.$refs["vf"]);
        // let footheight = this.$refs["vf"].clientHeight;
        // console.log(footheight);
        let scrollHeight;
        scrollHeight = -(index - 1) * height + "px";
      if (index == 3) {
        scrollHeight =  -1 * height -222 + "px";
      } else {
      }

      scrollPage.style.transform = `translateY(${scrollHeight})`;
    //   window.scrollTo({
    //     top: scrollHeight,
    //     behavior: "smooth"
    //   });
      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;
      if (this.fullpage.deltaY > 0) {
        // this.$parent.$refs.vfooter.footerVis(false);
        this.next();
      } else if (this.fullpage.deltaY < 0) {
        // this.$parent.$refs.vfooter.footerVis(true);
        this.pre();
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.cusWrap {
  overflow: hidden;
  // margin-bottom: 100vh;
  .firstPic {
    width: 100vw;
    height: 100vh;
    position: relative;
  }

  .fullPage {
    height: 100vh;
    overflow: hidden;
  }

  .fullPageContainer {
    width: 100%;
    height: 100%;
    transition: all linear 0.5s;
  }

  .section {
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-repeat: no-repeat;
  }

  .section1 {
    .down {
      position: absolute;
      bottom: 60px;
      left: 0;
      width: 100%;
      display: flex;
      justify-content: center;

      .el-image {
        -webkit-animation: move 1s ease-in-out infinite alternate;
        animation: move 1s ease-in-out infinite alternate;
        cursor: pointer;
      }
    }
  }

  .section1 .secction1-content {
    color: #fff;
    text-align: center;
    position: absolute;
    top: 40%;
    right: 0;
    left: 0;
  }

  .section2 {
    position: relative;

    .mask {
      position: absolute;
      width: 480px;
      margin: auto;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      height: 460px;
      background: #fff;
    }
  }
}

@keyframes move {
  0% {
    transform: scale(0.8);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1.2);
    /*放大1.1倍*/
  }
}

@-webkit-keyframes move {
  0% {
    transform: scale(0.8);
    /*开始为原始大小*/
  }

  100% {
    transform: scale(1.2);
    /*放大1.1倍*/
  }
}
</style>```