在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>
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持脚本之家!