vue2组件——翻页器

翻页器效果图

chrome-capture-2022-8-23.gif

---

话不多说先上代码

<template>
  <div class="turning">
     <div class="container" ref="conRef">

        <li class="active" style="background:red;"></li>

        <li style="background:gold;"></li>

        <li style="background:skyblue;"></li>

        <li style="background:greenyellow;"></li>

        <li style="background:pink;"></li>

    </div>

  </div>
</template>

<script>
export default {
  data(){
    return{
      activeIndex:0,
      endTime:new Date(),
    }
  },
  mounted(){
    let list = this.$refs['conRef'].childNodes;
    console.log(list)
      window.onmousewheel=e=>{
            let isDown=e.wheelDelta<0;
            this.handlePage(isDown,list)
        }
  },
  methods:{
    handlePage(isDown,list){
      if(new Date() - this.endTime < 500 ) return;
      if(isDown){
        this.activeIndex+=1;
        if(this.activeIndex>=list.length-1) this.activeIndex=list.length-1;
      }else{
        this.activeIndex-=1;
        if(this.activeIndex<=0) this.activeIndex=0;;
      }
      this.$refs['conRef'].style['transform']=`translateY(-${this.activeIndex*100}vh)`
       console.log(isDown?'下':'上');
      this.endTime  = new Date();
      
    }
  }
}
</script>

<style>
    .turning{
      overflow: hidden;
      width: 100vw;
      height: 100vh;
    }
    .container{
        width: 100vw;
        transition: .6s ease;
        
    }
    .container li{
        height: 100vh;
        width: inherit;
        transform: translateY(-0vh);
        opacity: 1;

    }
</style>

主要重点在于500毫秒内节流操作