vue中window.addEventListener(‘scroll‘,?xx)失效的解決
更新時(shí)間：2022年07月27日 10:06:54 作者：半開半落
這篇文章主要介紹了vue中window.addEventListener(‘scroll‘,?xx)失效的解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
window.addEventListener(‘scroll‘, xx)失效解決
多次嘗試都無(wú)法獲取到滾動(dòng)事件,后來(lái)加上true之后就可以了
window.addEventListener('scroll', this.clintHeight, true)window.addEventListener scroll在移動(dòng)端無(wú)效問題
在vue項(xiàng)目中有一個(gè)頁(yè)面滾動(dòng)的加載數(shù)據(jù)的事件，一開始用window.addEventListener scroll在瀏覽器上調(diào)試時(shí)可以監(jiān)聽到事件，但是在移動(dòng)端上無(wú)法監(jiān)聽到scroll事件
window.addEventListener('scroll',()=>{?
? ?console.log("頁(yè)面滾動(dòng)事件")?
})既然無(wú)法實(shí)現(xiàn)監(jiān)聽功能就干脆把監(jiān)聽事件綁定到dom元素上
<template>
<div id="pageId">
</div>
</template> <script>
mounted(){
let page = document.getElementById('pageId');
page.addEventListener('scroll', this.pageScroll,true)
},
methods:{
pageScroll(){
console.log("scroll")
}
}
</script>
<style>
#pageId{
height:100vh;
overflow-y:scroll
}
</style>以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖
這篇文章主要介紹了vue使用echarts如何實(shí)現(xiàn)雙柱狀圖和雙y軸的柱狀圖問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼
本篇文章主要介紹了vue與bootstrap實(shí)現(xiàn)時(shí)間選擇器的示例代碼，非常具有實(shí)用價(jià)值，需要的朋友可以參考下2017-08-08
Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽
這篇文章主要為大家詳細(xì)介紹了Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化，在實(shí)際的前端開發(fā)過程中，動(dòng)態(tài)適配是一個(gè)非常重要的問題，在數(shù)據(jù)可視化的場(chǎng)景下，圖表的動(dòng)態(tài)適配尤為重要，需要的朋友可以參考下2023-05-05
通過實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件
這篇文章主要介紹了通過實(shí)例解析chrome如何在mac環(huán)境中安裝vue-devtools插件,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令詳解
本文通過實(shí)例代碼給大家介紹了vue和webpack項(xiàng)目構(gòu)建過程常用的npm命令,需要的朋友可以參考下2018-06-06
AES對(duì)數(shù)據(jù)傳輸加密、解密處理---AES.js，下面分步驟給大家介紹vue使用AES.js的示例代碼，感興趣的朋友跟隨小編一起看看吧2021-10-10
vue樹形結(jié)構(gòu)數(shù)據(jù)處理的方法總結(jié)
在項(xiàng)目開發(fā)的過程中,會(huì)經(jīng)常使用樹形結(jié)構(gòu)數(shù)據(jù),前后端交互都會(huì)對(duì)數(shù)據(jù)進(jìn)行處理,后端返回的數(shù)據(jù)前端有的時(shí)候不能直接使用需要轉(zhuǎn)換,本文小編整理了一些項(xiàng)目中用到的處理方法,需要的朋友可以參考下2023-11-11
vue3的自定義指令directives實(shí)現(xiàn)
本文主要介紹了vue3的自定義指令directives實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-07-07
Vue3+Element?Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架)
這篇文章主要介紹了Vue3+Element Plus實(shí)現(xiàn)el-table跨行顯示(非腳手架),本文通過示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-09-09