需求:用户通过鼠标滚轮滑动的时候一整屏进行翻页。
参考网站效果
实现思路:
1.首先我们需获取可视区域的高度
document.documentElement.clientHeight;
2.根据动态设置top属性即可进行翻页。
3.需判断上滑还是下滑
根据onmousewheel滚轮事件即可判断,开始时间为当前时间,结束时间为事件结束以后当时间,若是差值为负数到一定区间,即可判断为向上滑动,否则为向下滑动。
注意点:
我们需通过onresize缩放来监听当前的可视窗口的高度。并且每次把当前窗口的值修改到显示区域,同时top值也需进行修改。
比如我们在第二屏幕的时候,每次改变的时候我会动态生成一个数组,并且滑动的时候,是会改变其页数的,因此我可以根据页数和高度数组进而来改变其top值。
代码展示
<template>
<div id="wrap" :style="[{ height: `${clientHeight}px` }]">
<div id="main" :style="{ top: `${topHeight}px` }">
<div class="page" :style="{ height: `${clientHeight}px` }">
1
</div>
<div class="page" :style="{ height: `${clientHeight}px` }">
2
</div>
<div class="page" :style="{ height: `${clientHeight}px` }">
3
</div>
<div class="page" :style="{ height: `${clientHeight}px` }">
4
</div>
<div class="page" :style="{ height: `${clientHeight}px` }">
5
</div>
</div>
<view class="pagination">
<view class="circle" v-for="v in maxCount" :key="v" :class="{ 'active':currentIdx == v }" @click="gotoPage(v)"></view>
</view>
</div>
</template>
<script>
export default {
name: 'homeIndex',
components: {
},
data() {
return {
clientHeight: 0,
topHeight: 0,
heightArr:[],
currentIdx: 1,
maxCount: 5,
}
},
mounted() {
this.clientHeight = document.documentElement.clientHeight;
this.getHeightArr();
this.getMouseEvent();
window.onresize = () => {
return (() => {
this.clientHeight = document.documentElement.clientHeight;
this.getHeightArr();
})()
}
},
methods: {
getHeightArr(){
let maxCount = this.maxCount;
let heightArr = [];
var height = this.clientHeight;
for(let i = 0; i < maxCount; i++){
let currentHeight = `-${height*i}`;
heightArr.push(currentHeight)
}
this.heightArr = heightArr;
this.topHeight = this.heightArr[this.currentIdx-1];
},
getMouseEvent() {
let that = this;
var startTime = 0;
var endTime = 0;
var now = 0;
var height = this.clientHeight;
var main = document.getElementById("main");
window.onmousewheel = function (e) {
height = that.clientHeight;
startTime = new Date().getTime();
now = Number(that.heightArr[that.currentIdx-1]);
if (endTime - startTime < -600) {
//鼠标向上移动
if (e.wheelDelta > 0 && parseInt(main.offsetTop) < 0) {
now = now + height;
//鼠标向下移动
} else if (e.wheelDelta < 0 && parseInt(main.offsetTop) + (height * 4) > 0) {
now = now - height;
}
setTimeout(() => {
that.topHeight = now;
let currentIdx = 1;
if(that.heightArr && that.heightArr.length > 0){
let idx = that.heightArr.findIndex((item)=>{
return item == now;
})
currentIdx = idx+1;
}
that.currentIdx = currentIdx;
that.$emit('get-home-scroll-idx',currentIdx)
}, 20);
endTime = startTime;
}
}
},
gotoPage(page){
this.currentIdx = page;
setTimeout(() => {
this.topHeight = this.heightArr[page-1];
})
}
}
}
</script>
<style lang="scss" scoped>
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
#wrap {
overflow: hidden;
}
#main {
position: relative;
top: 0;
transition: 0.5s;
}
.page {
width: 100%;
}
.pagination{
position: fixed;
right: 1.5%;
top: 50%;
transform: translateY(-50%);
z-index: 9;
display: flex;
flex-direction: column;
.circle{
width: 10px;
height: 10px;
display: block;
margin-top: 10px;
background: rgba(236,68,39,0.4);
border-radius: 50%;
cursor: pointer;
&.active{
height: 40px;
border-radius: 12px;
background: #EC4427;
}
}
}
</style>