一、問題發(fā)現(xiàn)

在看Vue的事件文檔中,測試scroll事件發(fā)現(xiàn)如下是行不通的,觸發(fā)不了scroll事件, 經(jīng)過一番搜尋未找到原因,不過找到了另外兩種在Vue中設(shè)置滾動事件。

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

二、原因分析

暫無

三、解決辦法

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

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

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

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前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。 // mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對html的dom節(jié)點進行一些需要的操作。 mounted(){ // addEventListener 方法用于向指定元素添加事件 // 參數(shù)1：必選 事件名 例如： click , scroll , mouseenter // 參數(shù)2：必選 指定事件觸發(fā)時的執(zhí)行函數(shù) // 參數(shù)3：可選 布爾值 指定事件是否咋在捕獲或冒泡階段執(zhí)行 // true - 事件在句柄捕獲階段執(zhí)行 // false - 事件句柄冒泡階段執(zhí)行 window.addEventListener(’scroll’, this.scrollDs , true) }, })

這種方法既能用滾輪來觸發(fā)事件也能用光標(biāo)拖動滾動條觸發(fā)事件。

總結(jié)

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