Vue中添加滾動事件設(shè)置的方法詳解
更新時間：2020年09月14日 08:52:50 作者：luckyjoke
這篇文章主要給大家介紹了關(guān)于Vue中添加滾動事件設(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è)置滾動事件。
<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.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ā)時的執(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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue-CLI3.x 設(shè)置反向代理的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)文本展開收起功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)
本文主要介紹了Vite圖片資源打包優(yōu)化的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)頁面滾動到底部刷新，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-08-08
這篇文章主要介紹了element中的el-upload附件上傳與附件回顯方式，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue基本用法很容易上手,但是有很多優(yōu)化的寫法你就不一定知道了,下面這篇文章主要給大家介紹了關(guān)于程序員應(yīng)該知道的vuex冷門小技巧的相關(guān)資料,需要的朋友可以參考下2022-05-05
如何使用Nginx將前端Vue項(xiàng)目部署到云服務(wù)器
記錄使用Nginx將純前端的Vue3項(xiàng)目部署到阿里云服務(wù)器（Ubuntu?22.04）上,包含通過Nginx代理實(shí)現(xiàn)跨域請求、以及個人踩坑記錄,感興趣的朋友一起看看吧2024-04-04
這篇文章主要介紹了TypeScript中集成Tween.js踩坑記錄，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-01-01
vue通過element樹形控件實(shí)現(xiàn)樹形表格
這篇文章主要為大家介紹了vue?element樹形控件實(shí)現(xiàn)樹形表格，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助2021-11-11
vue實(shí)現(xiàn)點(diǎn)擊某個div顯示與隱藏內(nèi)容功能實(shí)例
最近做項(xiàng)目有用到某個div顯示與隱藏內(nèi)容,所以下面這篇文章主要給大家介紹了關(guān)于vue實(shí)現(xiàn)點(diǎn)擊某個div顯示與隱藏內(nèi)容功能的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-12-12