滑动一整屏

需求：用户通过鼠标滚轮滑动的时候一整屏进行翻页。

参考网站效果

微派网络

实现思路：

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>