前言:
接到一个需求,屏幕上划时隐藏顶部导航栏,屏幕下划时再展示出来
部分核心代码:
<template>
<div>
...
<nav v-show="topNavShow"></nav>
...
</div>
</template>
<script>
export default {
data() {
return {
// 控制导航栏是否显示的变量
topNavShow: true,
// 声明一个数组存放比对数据
scrollData: [],
// 一个响应速度的参数,值越大响应越慢
responseSpeed: 20,
};
},
created() {
let _this = this;
// 监听页面滚动
window.addEventListener("scroll", function () {
var scrollTop =
document.documentElement.scrollTop ||
window.pageYOffset ||
document.body.scrollTop;
// 只有不在最顶部时才会生效
if (scrollTop > 100) {
console.log(_this.scrollData);
if (_this.scrollData.length == _this.responseSpeed) {
if (
_this.scrollData[0] <
_this.scrollData[_this.responseSpeed - 1]
) {
// 下划,屏幕往上走,隐藏
_this.topNavShow = false;
}
if (
_this.scrollData[0] >
_this.scrollData[_this.responseSpeed - 1]
) {
// 上划,屏幕往下走,显示
_this.topNavShow = true;
}
}
if (_this.scrollData.length >= _this.responseSpeed) {
_this.scrollData = [];
} else {
_this.scrollData.push(scrollTop);
}
} else {
_this.topNavShow = true;
}
});
},
};
</script>
思路就是声明一个数组,并规定数组长度。每次滚动都往数组中塞数据,数组到达指定长度时比对头部和尾部的数据,得出是上划还是下划