欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

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

一、問(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.類似于原生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.scrollTop
        console.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)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論