data{ oldScrollTop: 0, //記錄上一次滾動結(jié)束后的滾動距離 scrollTop: 0 ,// 記錄當(dāng)前的滾動距離 } watch: {scrollTop(newValue, oldValue) {setTimeout(() => {if(newValue == window.scrollY) { //延時執(zhí)行后當(dāng)newValue等于window.scrollY，代表滾動結(jié)束console.log('滾動結(jié)束');this.oldScrollTop = newValue; //每次滾動結(jié)束后都要給oldScrollTop賦值this.tran_flag=true;};}, 200); //必須使用延時器，否則每次newValue和window.scrollY都相等，無法判斷，20ms剛好大于watch的偵聽周期，故延時20msif(this.oldScrollTop == oldValue) { //每次滾動開始時oldScrollTop與oldValue相等console.log('滾動開始');this.tran_flag=false;}}}, methods: {handleScroll() {window.addEventListener('scroll', () => {this.scrollTop = window.scrollY;})},} beforeDestroy() {window.removeEventListener('scroll',() => {this.scrollTop = window.scrollY;}); //離開當(dāng)前組件別忘記移除事件監(jiān)聽哦}

總結(jié)

以上是生活随笔為你收集整理的vue监听滚动开始与结束的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。