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

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

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

二、原因分析

暫無(wú)

三、解決辦法

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

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

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

2.類(lèi)似于原生JS添加滾動(dòng)事件

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

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

總結(jié)

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