使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽(tīng)scroll事件的方法
思路：scroll在哪兒個(gè)組件內(nèi)，就在獲取那個(gè)dom元素。網(wǎng)上好多思路是
window.addEventListener("scroll", function(){
console.log('scrolling');
});
這是監(jiān)聽(tīng)不到的！如果你整個(gè)網(wǎng)頁(yè)可以滑動(dòng)，或許還可以試試！
對(duì)于像我這樣，只在頁(yè)面的內(nèi)的一個(gè)div內(nèi)要監(jiān)聽(tīng)的。
實(shí)現(xiàn)代碼如下：
第一步：滑動(dòng)的組件外層的div加 ref="viewBox" 為了通過(guò)$refs獲取dom元素
<!--設(shè)備列表-->
<div class="deviceWrapper" ref="viewBox">
<mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
<div class="demo-grid">
<!--設(shè)備列表 手機(jī)一行兩列 pad一行4列-->
<mu-row>
<mu-col v-for="device in devicesList" width="50" tablet="25" desktop="25">
<deviceCardView :device-data="device""></devicelightCardView>
</mu-col>
</mu-row>
</div>
<p class="bottomLine" v-bind:class="{bottomLineVisible:isScroll}">---------------------我是有底線(xiàn)的---------------------</p>
</div>
第二步：
mounted() {
// 通過(guò)$refs獲取dom元素
this.box = this.$refs.viewBox
// 監(jiān)聽(tīng)這個(gè)dom的scroll事件
this.box.addEventListener('scroll', () => {
console.log(" scroll " + this.$refs.viewBox.scrollTop)
//以下是我自己的需求，向下滾動(dòng)的時(shí)候顯示“我是有底線(xiàn)的（類(lèi)似支付寶）”
this.isScroll=this.$refs.viewBox.scrollTop>0
}, false)
}
ps：具體怎么做，看需求了。只要能打印出來(lái).scrollTop就行了
以上這篇使用vue.js在頁(yè)面內(nèi)組件監(jiān)聽(tīng)scroll事件的方法就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能
這篇文章介紹了vue3手動(dòng)設(shè)置滾動(dòng)條位置自動(dòng)定位功能,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-12-12
vue 解決mintui彈窗彈起來(lái),底部頁(yè)面滾動(dòng)bug問(wèn)題
這篇文章主要介紹了vue 解決mintui彈窗彈起來(lái),底部頁(yè)面滾動(dòng)bug問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)
下面小編就為大家分享一篇vue-cli開(kāi)發(fā)時(shí),關(guān)于ajax跨域的解決方法(推薦)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
Element-UI Table組件上添加列拖拽效果實(shí)現(xiàn)方法
這篇文章主要為大家詳細(xì)介紹了Element-UI Table組件上添加列拖拽效果的實(shí)現(xiàn)方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-04-04
Vue實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失效果
這篇文章主要介紹了VUE實(shí)現(xiàn)彈出框點(diǎn)擊空白頁(yè)彈框消失,實(shí)現(xiàn)方法可以在Vue中實(shí)現(xiàn)彈出框然后通過(guò)點(diǎn)擊空白頁(yè)面來(lái)讓彈窗隱藏,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實(shí)例，可以使用組件的所有方法，?在使用方法的時(shí)候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12
vue如何解決輪播圖(Swiper)第一張圖片一閃而過(guò)問(wèn)題
這篇文章主要介紹了vue如何解決輪播圖(Swiper)第一張圖片一閃而過(guò)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
vue3+ts 依賴(lài)注入provide inject的用法
vue3中引入新的組件傳值方式,就是provide/inject依賴(lài)注入模式,本文主要介紹了vue3+ts 依賴(lài)注入provide inject的用法,感興趣的可以了解一下2023-11-11
Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換(推薦)
這篇文章主要介紹了Vue2.0使用嵌套路由實(shí)現(xiàn)頁(yè)面內(nèi)容切換/公用一級(jí)菜單控制頁(yè)面內(nèi)容切換,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
vue-cli如何關(guān)閉Uncaught?error的全屏提示
這篇文章主要介紹了vue-cli如何關(guān)閉Uncaught?error的全屏提示問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04