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