最近接到了一個需求，需要在頁面中判斷滾動開始和結(jié)束餐曼。使用純原生的方法我們可以判斷出滾動開始和結(jié)束货岭，但是還是有些繁瑣的。利用vue中的watch實現(xiàn)了這一功能讳癌，今天就以垂直滾動為例穿稳，分享一下實現(xiàn)方法存皂。代碼如下：
export default {
data() {
return {
oldScrollTop: 0, //記錄上一次滾動結(jié)束后的滾動距離
scrollTop: 0 // 記錄當前的滾動距離
}
},
watch: {
scrollTop(newValue, oldValue) {
setTimeout(() => {
if(newValue == window.scrollY) { //延時執(zhí)行后當newValue等于window.scrollY晌坤，代表滾動結(jié)束
console.log('滾動結(jié)束');
this.oldScrollTop = newValue; //每次滾動結(jié)束后都要給oldScrollTop賦值
};
}, 20); //必須使用延時器，否則每次newValue和window.scrollY都相等旦袋，無法判斷骤菠，20ms剛好大于watch的偵聽周期，故延時20ms
if(this.oldScrollTop == oldValue) { //每次滾動開始時oldScrollTop與oldValue相等
console.log('滾動開始');
}
}
},
methods: {
handleScroll() {
window.addEventListener('scroll', () => {
this.scrollTop = window.scrollY;
})
}
},
mounted() {
this.handleScroll();
},
beforeDestroy() {
window.removeEventListener('scroll'); //離開當前組件別忘記移除事件監(jiān)聽哦
}
}
感謝閱讀該文章疤孕，看完點個贊哦商乎！
