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


Posted in Javascript onApril 11, 2017

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

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
JavaScript 一行代码,轻松搞定浮动快捷留言-V2升级版
Apr 02 Javascript
formvalidator验证插件中有关ajax验证问题
Jan 04 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
Sep 26 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
jQuery获取复选框被选中数量及判断选择值的方法详解
May 25 Javascript
Backbone中View之间传值的学习心得
Aug 09 Javascript
js实现unicode码字符串与utf8字节数据互转详解
Mar 21 Javascript
Node.js实现用户评论社区功能(体验前后端开发的乐趣)
May 09 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 Javascript
JavaScript代码压缩工具UglifyJS和Google Closure Compiler的基本用法
Apr 13 Javascript
jQuery插件FusionCharts绘制的2D双面积图效果示例【附demo源码】
Apr 11 #jQuery
jQuery EasyUI 组件加上“清除”功能实例详解
Apr 11 #jQuery
JS中IP地址与整数相互转换的实现代码
Apr 10 #Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 #Javascript
vue中如何引入jQuery和Bootstrap
Apr 10 #jQuery
详解vue.js全局组件和局部组件
Apr 10 #Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 #Javascript
You might like
php array_search() 函数使用
2010/04/13 PHP
完美实现GIF动画缩略图的php代码
2011/01/02 PHP
PHP定时执行计划任务的多种方法小结
2011/12/19 PHP
PHP根据IP地址获取所在城市具体实现
2013/11/27 PHP
php对文件进行hash运算的方法
2015/04/03 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
jquery 表格的增行删行实现思路
2013/03/21 Javascript
javascript的parseFloat()方法精度问题探讨
2013/11/26 Javascript
jquery Ajax 实现加载数据前动画效果的示例代码
2014/02/07 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
再次谈论Javascript中的this
2016/06/23 Javascript
Vue.js实现简单动态数据处理
2017/02/13 Javascript
JavaScript+CSS相册特效实例代码
2017/09/07 Javascript
ES6入门教程之变量的解构赋值详解
2019/04/13 Javascript
js常见遍历操作小结
2019/06/06 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
JavaScript实现复选框全选和取消全选
2020/11/20 Javascript
Pandas标记删除重复记录的方法
2018/04/08 Python
python使用turtle绘制分形树
2018/06/22 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python requests库的使用
2021/01/06 Python
Python LMDB库的使用示例
2021/02/14 Python
HTML5新表单元素_动力节点Java学院整理
2017/07/12 HTML / CSS
ReVive利维肤美国官网:RéVive Skincare
2018/04/18 全球购物
施华洛世奇加拿大官网:SWAROVSKI加拿大
2018/06/03 全球购物
Shopee越南:东南亚与台湾电商平台
2019/02/03 全球购物
不开辟用于交换数据的临时空间,如何完成字符串的逆序
2012/12/02 面试题
工程管理英文求职信
2014/03/18 职场文书
2014年社区居委会主任重阳节讲话稿
2014/09/25 职场文书
2016入党积极分子党校培训心得体会
2016/01/06 职场文书
JS实现扫雷项目总结
2021/05/19 Javascript
漫画「日和酱的要求是绝对的」第3卷封面公开
2022/03/21 日漫
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python