vue監(jiān)聽滾動事件實現(xiàn)滾動監(jiān)聽

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

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

在vue中實現(xiàn)滾動監(jiān)聽和原生js無太大差異，下面是一個簡單的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í)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

vue3+ant?design的form數(shù)組表單校驗方法
這篇文章主要介紹了vue3+ant?design的form數(shù)組表單，如何校驗,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧
2023-09-09
Vue框架下引入ActiveX控件的問題解決
這篇文章主要介紹了Vue框架下引入ActiveX控件的問題解決，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
Vue form 表單提交+ajax異步請求+分頁效果
這篇文章主要介紹了Vue form 表單提交+ajax異步請求+分頁效果,需要的朋友可以參考下
2017-04-04
vue 使用v-for進行循環(huán)的實例代碼詳解
這篇文章主要介紹了vue 使用v-for進行循環(huán)的實例代碼詳解,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下
2020-02-02
Vue微信公眾號網(wǎng)頁分享的示例代碼
這篇文章主要介紹了Vue微信公眾號網(wǎng)頁分享的示例代碼，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05
vue自定義指令合集(超實用!)
Vue自定義指令是Vue中一種非常有用的擴展能力,它允許你在標準的模板語法中使用自定義行為,而不需要編寫新的組件或者混入,這篇文章主要給大家介紹了關(guān)于vue自定義指令的相關(guān)資料,需要的朋友可以參考下
2024-03-03
淺析Vue3中Excel下載模板并導(dǎo)入數(shù)據(jù)功能的實現(xiàn)
這篇文章主要為大家詳細介紹了Vue3中的Excel數(shù)據(jù)管理,即下載模板并導(dǎo)入數(shù)據(jù)功能的實現(xiàn),文中的示例代碼講解詳細,感興趣的小伙伴可以參考一下
2024-05-05
Vue.js條件渲染和列表渲染以及Vue中key值的內(nèi)部原理
這篇文章主要介紹了Vue.js條件渲染和列表渲染，以及Vue中key值的內(nèi)部原理，文中有詳細的代碼示例，感興趣的同學(xué)可以參考閱讀
2023-04-04
vue如何實現(xiàn)簡易流程圖
這篇文章主要介紹了vue如何實現(xiàn)簡易流程圖問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-10-10
Vue實現(xiàn)嵌套菜單組件
這篇文章主要為大家詳細介紹了Vue實現(xiàn)嵌套菜單組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-07-07