vue監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽
更新時(shí)間：2017年04月11日 09:22:14 作者：22337383
本文主要介紹了vue監(jiān)聽滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧
在vue中實(shí)現(xiàn)滾動(dòng)監(jiān)聽和原生js無(wú)太大差異，下面是一個(gè)簡(jiǎn)單的demo，可在控制臺(tái)查看結(jié)果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="https://unpkg.com/vue@2.2.6/dist/vue.js"></script>
<style type="text/css">
#box {
width: 100%;
height: 2000px;
}
</style>
</head>
<div id="box"></div>
<body>
<!-- vue監(jiān)聽滾動(dòng)事件 -->
<script type="text/javascript">
var vm = new Vue({
el:'#box',
data() {
return {
scroll: ''
}
},
methods: {
menu() {
this.scroll = document.body.scrollTop;
console.log(this.scroll)
}
},
mounted() {
window.addEventListener('scroll', this.menu)
},
})
</script>
</body>
</html>
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
您可能感興趣的文章:
- vue+導(dǎo)航錨點(diǎn)聯(lián)動(dòng)-滾動(dòng)監(jiān)聽和點(diǎn)擊平滑滾動(dòng)跳轉(zhuǎn)實(shí)例
- vue 自定指令生成uuid滾動(dòng)監(jiān)聽達(dá)到tab表格吸頂效果的代碼
- VUE 實(shí)現(xiàn)滾動(dòng)監(jiān)聽 導(dǎo)航欄置頂?shù)姆椒?/a>
- 詳解使用vue-router進(jìn)行頁(yè)面切換時(shí)滾動(dòng)條位置與滾動(dòng)監(jiān)聽事件
- vue實(shí)現(xiàn)錨點(diǎn)跳轉(zhuǎn)及滾動(dòng)監(jiān)聽的方法
相關(guān)文章
vue3+ant?design的form數(shù)組表單校驗(yàn)方法
這篇文章主要介紹了vue3+ant?design的form數(shù)組表單，如何校驗(yàn),本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友參考下吧2023-09-09
這篇文章主要介紹了Vue框架下引入ActiveX控件的問(wèn)題解決，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
Vue form 表單提交+ajax異步請(qǐng)求+分頁(yè)效果
這篇文章主要介紹了Vue form 表單提交+ajax異步請(qǐng)求+分頁(yè)效果,需要的朋友可以參考下2017-04-04
vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解
這篇文章主要介紹了vue 使用v-for進(jìn)行循環(huán)的實(shí)例代碼詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-02-02
Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼
這篇文章主要介紹了Vue微信公眾號(hào)網(wǎng)頁(yè)分享的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
Vue自定義指令是Vue中一種非常有用的擴(kuò)展能力,它允許你在標(biāo)準(zhǔn)的模板語(yǔ)法中使用自定義行為,而不需要編寫新的組件或者混入,這篇文章主要給大家介紹了關(guān)于vue自定義指令的相關(guān)資料,需要的朋友可以參考下2024-03-03
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實(shí)現(xiàn),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以參考一下2024-05-05
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細(xì)的代碼示例，感興趣的同學(xué)可以參考閱讀2023-04-04
這篇文章主要介紹了vue如何實(shí)現(xiàn)簡(jiǎn)易流程圖問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07