vue Realizes Scroll Mouse Wheel Switch Page

This article example for everyone to share vue to achieve the scroll mouse wheel switch page specific code, for your reference, the specific content is as follows

The new project products were driven crazy by Party A's requirements, and they were returned to the manuscript about 100 + times. Finally, Party A found a template with a sense of science and technology on the Internet. Let's write it according to it. The homepage is similar to the effect of vertical lantern, mouse scrolling and switching, and switching one whole screen at a time. I haven't touched it before, so I wrote a simple demo, just as a study note.

In fact, the principle is very simple, that is, put all pages in an div, and then change the top of the outer div when scrolling.

Because scroll bar listening events are real-time, throttling should be added to prevent page switching from being too fast. I can only switch 1 page at 1.5 s.

In fact, vue should not operate dom, but should use data to render virtual dom, but some places have not found a suitable method for the time being, or use dom operation.

<template>
  <div id="wrap" :style="{ height: screenHeight + 'px' }">
    <div id="main" :style="{ top: nowTop + 'px' }">
      <ul id="pageUl" type="circle">
        <li id="pageUlLi1" class="pageUlLi" :class="{'active': curIndex == 1}">&nbsp;</li>
        <li id="pageUlLi2" class="pageUlLi" :class="{'active': curIndex == 2}">&nbsp;</li>
        <li id="pageUlLi3" class="pageUlLi" :class="{'active': curIndex == 3}">&nbsp;</li>
        <li id="pageUlLi4" class="pageUlLi" :class="{'active': curIndex == 4}">&nbsp;</li>
        <li id="pageUlLi5" class="pageUlLi" :class="{'active': curIndex == 5}">&nbsp;</li>
      </ul>
      <div style="background-color: #1b6d85" id="page1" class="page"></div>
      <div style="background-color: #5cb85c" id="page2" class="page"></div>
      <div style="background-color: #8a6d3b" id="page3" class="page"></div>
      <div style="background-color: #337ab7" id="page4" class="page"></div>
      <div style="background-color: #66512c" id="page5" class="page"></div>
    </div>
  </div>
</template>
 
<script>
  
  export default {
    name: 'Home',
    data(){
      return{
        screenWeight: 0,    //  Screen width 
        screenHeight: 0,    //  Screen height 
        index: 1,        //  Used to judge page turning 
        curIndex: 1,      //  Of the current page index
        startTime: 0,      //  Screen flipping start time  
        endTime: 0,       //  Upper 1 End time of second screen flipping 
        nowTop: 0,       //  After flipping the screen top Location of 
        pageNum: 0,       // 1 How many pages are there 
        main: Object,
        obj: Object
      }
    },
    mounted(){
      this.screenWeight = document.documentElement.clientWidth;
      this.screenHeight = document.documentElement.clientHeight;
      this.main = document.getElementById("main");
      this.obj = document.getElementsByTagName("div");
      for (let i = 0; i < this.obj.length; i++) {
        if (this.obj[i].className == 'page') {
          this.obj[i].style.height = this.screenHeight + "px";
        }
      }
      this.pageNum = document.querySelectorAll(".page").length;
 
      //  Browser compatibility    
      if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
        document.addEventListener("DOMMouseScroll", this.scrollFun, false);
      } else if (document.addEventListener) {
        document.addEventListener("mousewheel", this.scrollFun, false);
      } else if (document.attachEvent) {
        document.attachEvent("onmousewheel", this.scrollFun);
      } else {
        document.onmousewheel = this.scrollFun;
      }
    },
    methods:{
      scrollFun(event) {
        this.startTime = new Date().getTime();
        // mousewheel In the event   " event.wheelDelta "   Attribute value: If a positive value is returned, it means that the scroll wheel is scrolling upward 
        // DOMMouseScroll In the event   " event.detail "   Attribute value: If a negative value is returned, the scroll wheel is scrolling upward 
        let delta = event.detail || (-event.wheelDelta);
        //  If the difference between the current scroll start time and the last scroll end time is less than 1.5s The page turning action is not performed, which is done to achieve an effect similar to throttling 
        if ((this.startTime - this.endTime) > 1500) {
          if (delta > 0 && parseInt(this.main.offsetTop) >= -(this.screenHeight * (this.pageNum - 2))) {
            //  Scroll down 
            this.index++;
            this.toPage(this.index);
          }else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
            //  Scroll up 
            this.index--;
            this.toPage(this.index);
          }
          //  End of this page turning. Record the end time for the next judgment 
          this.endTime = new Date().getTime();
        }
      },
      //  Page turning 
      toPage(index) {
        if (index != this.curIndex) {
          let delta = index - this.curIndex;
          this.nowTop = this.nowTop - delta * this.screenHeight;
          this.curIndex = index;
        }
      }
    }
  }
</script>
<style>
  html, body {
    height: 100%;
  }
 
  body, ul, li, a, p, div {
    /* Delete carefully */
    padding: 0px;
    margin: 0px;
  }
 
  #wrap {
    overflow: hidden;
    width: 100%;
  }
 
  #main {
    position: relative;
    transition:top 1.5s;
  }
 
  .page {
    /* Delete */
    width: 100%;
    margin: 0;
  }
 
  #pageUl {
    position: fixed;
    right: 10px;
    bottom: 50%;
  }
 
  .active{
    color: red;
  }
</style>