vue項目中onscroll的坑及解決
更新時間：2024年03月24日 15:06:50 作者：明月松江
這篇文章主要介紹了vue項目中onscroll的坑及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
vue項目中onscroll的坑
在項目中需要監(jiān)聽一個組件的scroll事件，以觸發(fā)到底時加載更多。
但是實際操作下來發(fā)現(xiàn)scroll事件并沒有被監(jiān)聽到。
通過查詢資料得知，監(jiān)聽的目標元素element的scroll事件不冒泡。
解決scroll綁定失敗的方法
scroll直接綁定在window的捕獲階段；
window.addEventListener(‘scroll',methodName，true);
還有另外一個方式：
使用谷歌瀏覽器的開發(fā)者工具 performance 錄制滾動動作，在event log 里查看scroll事件的目標元素，給這個元素綁定scroll事件。
如下圖：
這里我們發(fā)現(xiàn)了scroll事件的目標元素是div.info-bottom，我們直接給它綁定scroll事件就可以了。
vue關(guān)于滾動事件v-on:scroll
vue關(guān)于滾動頁面
全局監(jiān)聽滾動
created() {
var _this = this;
window.addEventListener('scroll',()=>{//觸發(fā)事件},true);
}局部監(jiān)聽
<!--添加ref-->
<div class="headcol" ref="viewBox">
<table>
<thead>
<tr >
<td v-for="c in list.header">
{{c}}
</td>
</tr>
</thead>
<tbody>
<tr v-for="r in list.rows">
<td v-for="c in r">
{{c}}
</td>
</tr>
</tbody>
</table>
</div>// 首先通過$refs獲取dom元素
this.box = this.$refs.viewBox
// 監(jiān)聽這個dom的scroll事件
this.box.addEventListener('scroll', () => {
console.log(this.$refs.viewBox.scrollTop)
}, false)總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項
這篇文章主要介紹了Vue子組件如何修改父組件數(shù)據(jù)的方法及注意事項,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-06-06
下面小編就為大家分享一篇基于vue中css預(yù)加載使用sass的配置方式詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例
下面小編就為大家分享一篇Vue.js+Layer表格數(shù)據(jù)綁定與實現(xiàn)更新的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要為大家詳細介紹了Vue3中實現(xiàn)過渡動畫的一些常用方法,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-10-10
基于Vue?+?ElementUI實現(xiàn)可編輯表格及校驗
這篇文章主要給大家介紹了基于Vue?+?ElementUI?實現(xiàn)可編輯表格及校驗,文中有詳細的代碼講解和實現(xiàn)思路,講解的非常詳細,有需要的朋友可以參考下2023-08-08
vue init webpack 建vue項目報錯的解決方法
今天小編就為大家分享一篇vue init webpack 建vue項目報錯的解決方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決
這篇文章主要介紹了Vue3數(shù)據(jù)更新,頁面沒有同步更新的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue中.vue文件比main.js先執(zhí)行的問題及解決
這篇文章主要介紹了Vue中.vue文件比main.js先執(zhí)行的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了vue選擇下拉框動態(tài)變化表單方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
vue-element-admin按鈕級權(quán)限管控的實現(xiàn)
開發(fā)離不開權(quán)限,不同的用戶登錄,根據(jù)不同的權(quán)限,可以訪問不同的管理目錄，本文主要介紹了vue-element-admin按鈕級權(quán)限管控的實現(xiàn)，具有一定的參考價值，感興趣的可以了解一下2022-04-04