翻页器效果图
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毫秒内节流操作
