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.js響應式數(shù)據(jù)的簡單實現(xiàn)方法(一看就會)
Vue最巧妙的特性之一是其響應式系統(tǒng),下面這篇文章主要給大家介紹了關(guān)于Vue.js響應式數(shù)據(jù)的簡單實現(xiàn)方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-03-03
這篇文章主要為大家詳細介紹了vue中element-ui使用axios上傳文件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vue2+elementUI的el-tree的選中、高亮、定位功能的實現(xiàn)
這篇文章主要介紹了vue2+elementUI的el-tree的選中、高亮、定位功能，本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-09-09
element-ui中el-form-item內(nèi)的el-select該如何自適應寬度
自從用了element-ui,確實好用,該有的組件都有,但是組件間的樣式都固定好了,下面這篇文章主要給大家介紹了關(guān)于element-ui中el-form-item內(nèi)的el-select該如何自適應寬度的相關(guān)資料,需要的朋友可以參考下2022-11-11
ElementUI 詳細分析DatePicker 日期選擇器實戰(zhàn)
這篇文章主要介紹了ElementUI詳細分析DatePicker 日期選擇器實戰(zhàn)教程,本文通過實例代碼圖文介紹給大家講解的非常詳細,感興趣的朋友跟隨小編一起看看吧2024-08-08
vue中watch監(jiān)聽路由傳來的參數(shù)變化問題
這篇文章主要介紹了vue中watch監(jiān)聽路由傳來的參數(shù)變化,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-07-07
分頁組件是一種用戶界面元素,用于在長列表或數(shù)據(jù)集中分割內(nèi)容,分頁組件是每個開發(fā)人員必須掌握的一個組件,廣泛應用在各個場所,用以用戶方便閱讀等,本文就給大家介紹一下如何基于vue寫出的分頁組件,需要的朋友可以參考下2023-08-08
這篇文章主要介紹了vue遮罩層如何阻止?jié)L動，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
本篇文章主要介紹了Vue2 SSR渲染根據(jù)不同頁面修改 meta，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-11
這篇文章主要介紹了VUE 單頁面使用 echart 窗口變化時的用法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07