一、問題發現

在看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.scrollTop
        console.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新增滾動事件設定內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！