vue监听滚动事件实现滚动监听

2019-11-19 16:51:59

字体：大中小

来源：转载

供稿：网友

在vue中实现滚动监听和原生js无太大差异，下面是一个简单的demo，可在控制台查看结果

<!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监听滚动事件 --> <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>

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持武林网！

上一篇：vuejs绑定class和style样式

下一篇：jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】