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

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></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>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wwyygj.html