vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽
更新時(shí)間：2017年04月11日 09:22:14 作者：22337383
本文主要介紹了vue監(jiān)聽滾動事件實(shí)現(xiàn)滾動監(jiān)聽的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來看下吧
在vue中實(shí)現(xiàn)滾動監(jiān)聽和原生js無太大差異，下面是一個(gè)簡單的demo，可在控制臺查看結(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)聽滾動事件 -->
<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>
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！
相關(guān)文章
由于 Vue 會在初始化實(shí)例時(shí)進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對象上存在時(shí)才能進(jìn)行上述過程 ，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場景分析,需要的朋友可以參考下2023-02-02
解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問題
今天小編就為大家分享一篇解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06
在VSCode中添加好用的插件可以提高我們的開發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下2022-12-12
vuejs響應(yīng)用戶事件（如點(diǎn)擊事件）
本篇文章主要介紹了vuejs響應(yīng)用戶事件（如點(diǎn)擊），通過vuejs響應(yīng)用戶事件的技巧，具有一定的參考價(jià)值，有興趣的小伙伴們可以參考一下。2017-03-03
Vue中使用定時(shí)器(setInterval、setTimeout)的兩種方式
js中定時(shí)器有兩種，一個(gè)是循環(huán)執(zhí)行?setInterval，另一個(gè)是定時(shí)執(zhí)行?setTimeout，這篇文章主要介紹了Vue中使用定時(shí)器?（setInterval、setTimeout）的兩種方式,需要的朋友可以參考下2023-03-03
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容
這篇文章主要給大家介紹了關(guān)于el-input輸入校驗(yàn)不能為空格以及不能輸入全部為空的內(nèi)容的相關(guān)資料,el-input驗(yàn)證規(guī)則主要是為了確保輸入的內(nèi)容符合特定的要求,需要的朋友可以參考下2023-10-10
elementUI select組件使用及注意事項(xiàng)詳解
這篇文章主要介紹了elementUI select組件使用及注意事項(xiàng)詳解，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-05-05