一、問題發現

在看Vue的事件文檔中,測試scroll事件發現如下是行不通的,觸發不了scroll事件, 經過一番搜尋未找到原因,不過找到了另外兩種在Vue中設置滾動事件。

<div @scroll=’showOut’></div>

二、原因分析

暫無

三、解決辦法

1.直接利用mousewheel事件替代scroll事件

<div @mousewheel=’showOut’></div>

mousewheel鼠標滾輪,顯而易見動動鼠標滾輪就能觸發事件,但是用光標拖拽滾動條就不能觸發事件。

2.類似于原生JS添加滾動事件

new Vue({ el:’#app’, data:{scroll:’0’ }, methods:{ // showOut: function ( ) { // console.log(’hhhhh’) // } scrollDs : function ( ) {// 頁面指定了DTD，即指定了DOCTYPE時，使用document.documentElement。// 頁面沒有DTD，即沒指定DOCTYPE時，使用document.body。this.scroll = document.documentElement.scrollTopconsole.log(this.scroll) } }, // created:在模板渲染成html前調用，即通常初始化某些屬性值，然后再渲染成視圖。 // mounted:在模板渲染成html后調用，通常是初始化頁面完成后，再對html的dom節點進行一些需要的操作。 mounted(){ // addEventListener 方法用于向指定元素添加事件 // 參數1：必選 事件名 例如： click , scroll , mouseenter // 參數2：必選 指定事件觸發時的執行函數 // 參數3：可選 布爾值 指定事件是否咋在捕獲或冒泡階段執行 // true - 事件在句柄捕獲階段執行 // false - 事件句柄冒泡階段執行 window.addEventListener(’scroll’, this.scrollDs , true) }, })

這種方法既能用滾輪來觸發事件也能用光標拖動滾動條觸發事件。

總結

到此這篇關于Vue中添加滾動事件設置的文章就介紹到這了,更多相關Vue添加滾動事件設置內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！