SoFunction
Updated on 2025-02-28

vue realizes scrolling mouse wheel switching page

This article shares the specific code for vue to realize the scrolling mouse wheel switching page for your reference. The specific content is as follows

The new project product was driven crazy by the request of Party A. It was probably over 100 times. Finally, Party A found a template they thought was more technological and asked us to write it as follows. The homepage is similar to a vertical *, with the mouse scrolling to switch, and the entire screen is switched at a time. I haven't come across it before, so I wrote a simple demo, just as a study note.

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

Because the scrollbar listening event is real-time, throttling is required to prevent the page from switching too quickly. I can only switch to a page in 1.5s.

In fact, vue should not operate the dom, and should use data to render the virtual dom, but in some places, there is no suitable method yet, so the dom operation is still used.

<template>
  <div  :style="{ height: screenHeight + 'px' }">
    <div  :style="{ top: nowTop + 'px' }">
      <ul  type="circle">
        <li  class="pageUlLi" :class="{'active': curIndex == 1}"> </li>
        <li  class="pageUlLi" :class="{'active': curIndex == 2}"> </li>
        <li  class="pageUlLi" :class="{'active': curIndex == 3}"> </li>
        <li  class="pageUlLi" :class="{'active': curIndex == 4}"> </li>
        <li  class="pageUlLi" :class="{'active': curIndex == 5}"> </li>
      </ul>
      <div style="background-color: #1b6d85"  class="page"></div>
      <div style="background-color: #5cb85c"  class="page"></div>
      <div style="background-color: #8a6d3b"  class="page"></div>
      <div style="background-color: #337ab7"  class="page"></div>
      <div style="background-color: #66512c"  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 turn        curIndex: 1,      // index of the current page        startTime: 0,      // Start time of screen flip        endTime: 0,       // The end time of the last screen flip        nowTop: 0,       // The top position after the screen is turned        pageNum: 0,       // How many pages are there in total        main: Object,
        obj: Object
      }
    },
    mounted(){
       = ;
       = ;
       = ("main");
       = ("div");
      for (let i = 0; i < ; i++) {
        if ([i].className == 'page') {
          [i]. =  + "px";
        }
      }
       = (".page").length;
 
      // Browser compatible      if ((().indexOf("firefox") != -1)) {
        ("DOMMouseScroll", , false);
      } else if () {
        ("mousewheel", , false);
      } else if () {
        ("onmousewheel", );
      } else {
         = ;
      }
    },
    methods:{
      scrollFun(event) {
         = new Date().getTime();
        // The "" attribute value in the mousewheel event: If the returned value is positive, it means that the scroll wheel is scrolling upwards.        // The "" attribute value in the DOMMouseScroll event: If the returned value is negative, it means that the scroll wheel is scrolling upwards.        let delta =  || (-);
        // If the difference between the current scroll start time and the last scroll end time is less than 1.5s, the page turn action is not performed. This is done to achieve a throttling effect similar to        if (( - ) > 1500) {
          if (delta > 0 && parseInt() >= -( * ( - 2))) {
            // Scroll down            ++;
            ();
          }else if (delta < 0 && parseInt() < 0) {
            // Scroll up            --;
            ();
          }
          // This page turn is over, the end time is recorded, used for the next judgment           = new Date().getTime();
        }
      },
      // Turn page      toPage(index) {
        if (index != ) {
          let delta = index - ;
           =  - delta * ;
           = index;
        }
      }
    }
  }
</script>
<style>
  html, body {
    height: 100%;
  }
 
  body, ul, li, a, p, div {
    /*Remove carefully*/
    padding: 0px;
    margin: 0px;
  }
 
  #wrap {
    overflow: hidden;
    width: 100%;
  }
 
  #main {
    position: relative;
    transition:top 1.5s;
  }
 
  .page {
    /*Remember to delete*/
    width: 100%;
    margin: 0;
  }
 
  #pageUl {
    position: fixed;
    right: 10px;
    bottom: 50%;
  }
 
  .active{
    color: red;
  }
</style>

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.