watch来监听window.scrollY和window.scrollX
时间: 2024-05-24 19:14:21 浏览: 14
的变化太费资源,有没有更好的方法可以实现滚动监听?
有很多现成的 JavaScript 库可以实现滚动监听,比如使用 jQuery 库的滚动监听功能,或者使用 Intersection Observer API 实现滚动监听,都可以提升性能并减少资源消耗。除此之外,也可以使用防抖和节流技术来减少事件触发的次数,从而提升性能。
相关问题
vue2watch监听window
对象的变化,有什么实际应用场景和用法吗?
Vue2中提供了`$watch`来监听Vue实例中的数据变化,而`$watch`的参数可以是一个字符串或者函数,但是如果需要监听window对象的变化,只能使用Vue2提供的`watchEffect`,即允许用户监听数据源的响应式变化的异步方法。
对于监听window对象的变化,通常是用来监听浏览器窗口尺寸的变化,从而自适应地调整网页布局。另外,有些页面可能需要根据浏览器中的滚动位置来做一些操作(例如固定导航栏),那么也可以使用`watch`来监听`window.scrollY`和`window.scrollX`这两个属性的变化。
优化一下这段代码watch: { scrollTop(newValue, oldValue) { setTimeout(() => { if (newValue == window.scrollY) { //延时执行后当newValue等于window.scrollY,代表滚动结束 this.oldScrollTop = newValue; //每次滚动结束后都要给oldScrollTop赋值 if (this.oldScrollTop > 100) { this.searchBgc = "#ccc"; // console.log(1111); } else { this.searchBgc = "transparent"; } } }, 20); //必须使用延时器,否则每次newValue和window.scrollY都相等,无法判断,20ms刚好大于watch的侦听周期,故延时20ms if (this.oldScrollTop == oldValue) { //每次滚动开始时oldScrollTop与oldValue相等 // console.log("滚动开始"); } },
可以优化代码如下:
watch: {
scrollTop: {
handler: function(newValue, oldValue) {
clearTimeout(this.timer); //清除之前的定时器
this.timer = setTimeout(() => {
if (newValue == window.scrollY) {
//滚动结束时执行
this.oldScrollTop = newValue;
if (this.oldScrollTop > 100) {
this.searchBgc = "#ccc";
} else {
this.searchBgc = "transparent";
}
} else {
//滚动中时执行
if (this.oldScrollTop == oldValue) {
//滚动开始时执行
// console.log("滚动开始");
}
}
}, 20);
},
immediate: true //立即执行handler函数
}
}
优化的主要点如下:
1. 使用 clearTimeout 清除之前的定时器,避免定时器叠加执行。
2. 将 handler 函数的内容拆分成滚动结束时执行和滚动中时执行两部分。
3. 使用立即执行模式(immediate: true)确保在组件创建时立即执行 handler 函数。