快捷導(dǎo)航

Vue中添加滾動(dòng)事件設(shè)置的方法詳解

更新時(shí)間：2020年09月14日 08:52:50 作者：luckyjoke

這篇文章主要給大家介紹了關(guān)于Vue中添加滾動(dòng)事件設(shè)置的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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

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

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

二、原因分析

暫無

三、解決辦法

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

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

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

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

  new Vue({
    el:'#app',
    data:{
        scroll:'0'
      
    },
    methods:{
      // showOut: function ( ) {
      // console.log('hhhhh')

      // }
      scrollDs : function ( ) {
        // 頁面指定了DTD，即指定了DOCTYPE時(shí)，使用document.documentElement。
        // 頁面沒有DTD，即沒指定DOCTYPE時(shí)，使用document.body。
        this.scroll = document.documentElement.scrollTop
        console.log(this.scroll)
        
      }
    },
    // created:在模板渲染成html前調(diào)用，即通常初始化某些屬性值，然后再渲染成視圖。
    // mounted:在模板渲染成html后調(diào)用，通常是初始化頁面完成后，再對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)
    },
  })

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

總結(jié)

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

您可能感興趣的文章: