快捷導(dǎo)航

vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)

更新時(shí)間：2017年04月11日 09:22:14 作者：22337383

本文主要介紹了vue監(jiān)聽(tīng)滾動(dòng)事件實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)的相關(guān)資料。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧

在vue中實(shí)現(xiàn)滾動(dòng)監(jiān)聽(tīng)和原生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)聽(tīng)滾動(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í)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

Vue中$set()的使用方法場(chǎng)景分析
由于 Vue 會(huì)在初始化實(shí)例時(shí)進(jìn)行雙向數(shù)據(jù)綁定，使用Object.defineProperty()對(duì)屬性遍歷添加 getter/setter 方法，所以屬性必須在 data 對(duì)象上存在時(shí)才能進(jìn)行上述過(guò)程，這樣才能讓它是響應(yīng)的，這篇文章主要介紹了Vue中$set()的使用方法場(chǎng)景分析,需要的朋友可以參考下
2023-02-02
解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問(wèn)題
今天小編就為大家分享一篇解決vue項(xiàng)目nginx部署到非根目錄下刷新空白的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法
這篇文章主要介紹了Vue-循環(huán)遍歷選項(xiàng)賦值到對(duì)應(yīng)控件的實(shí)現(xiàn)方法啊，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2020-06-06
Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件推薦
在VSCode中添加好用的插件可以提高我們的開(kāi)發(fā)效率,這些可以幫助我們格式化,擴(kuò)充性,執(zhí)行最佳實(shí)踐的代碼方式,自動(dòng)完成一些瑣碎的事情,下面這篇文章主要給大家推薦介紹了關(guān)于Vue3開(kāi)發(fā)必備的六個(gè)VSCode插件,需要的朋友可以參考下
2022-12-12
vuejs響應(yīng)用戶事件（如點(diǎn)擊事件）
本篇文章主要介紹了vuejs響應(yīng)用戶事件（如點(diǎn)擊），通過(guò)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
vue.js表格分頁(yè)示例
這篇文章主要為大家詳細(xì)介紹了vue.js表格分頁(yè)示例，ajax異步加載數(shù)據(jù)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-10-10
在vue中實(shí)現(xiàn)echarts隨窗體變化
這篇文章主要介紹了在vue中實(shí)現(xiàn)echarts隨窗體變化，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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)詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2019-05-05