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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
JavaScript NaN和Infinity特殊值 [译]
Sep 20 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
JavaScript加入收藏夹功能(兼容IE、firefox、chrome)
May 05 Javascript
jQuery实现的向下图文信息滚动效果
May 03 Javascript
javascript实现鼠标点击页面 移动DIV
Dec 02 Javascript
Angular.JS去掉访问路径URL中的#号详解
Mar 30 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
Sep 10 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
Jun 07 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 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实现根据图片色界在不同位置加水印的方法
2015/08/08 PHP
PHP通过引用传递参数用法分析
2016/12/01 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
jquery和雅虎的yql服务实现天气预报服务示例
2014/02/08 Javascript
ExtJs纵坐标值重复问题的解决方法
2014/02/27 Javascript
javascript读取Xml文件做一个二级联动菜单示例
2014/03/17 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
JS组件Bootstrap实现下拉菜单效果代码
2016/04/26 Javascript
jQuery实现Select下拉列表进行状态选择功能
2017/03/30 jQuery
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
2017/05/17 Javascript
js es6系列教程 - 基于new.target属性与es5改造es6的类语法
2017/09/02 Javascript
浅谈angular2路由预加载策略
2017/10/04 Javascript
微信小程序progress组件使用详解
2018/01/31 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
24个解决实际问题的ES6代码片段(小结)
2020/02/02 Javascript
JS实现手风琴特效
2020/11/08 Javascript
[11:12]2018DOTA2国际邀请赛寻真——绿色长城OpTic
2018/08/10 DOTA
python提取内容关键词的方法
2015/03/16 Python
Python读取指定日期邮件的实例
2019/02/01 Python
python中嵌套函数的实操步骤
2019/02/27 Python
pytorch 预训练层的使用方法
2019/08/20 Python
TensorFlow查看输入节点和输出节点名称方式
2020/01/04 Python
在tensorflow中实现屏蔽输出的log信息
2020/02/04 Python
基于python实现地址和经纬度转换
2020/05/19 Python
Python3爬虫关于代理池的维护详解
2020/07/30 Python
PyCharm中关于安装第三方包的三个建议
2020/09/17 Python
英国首屈一指的票务公司:See Tickets
2019/05/11 全球购物
英国奢侈品牌时尚购物平台:Farfetch(支持中文)
2020/02/18 全球购物
新东方旗下远程教育网站:新东方在线
2020/03/19 全球购物
Expedia瑞典官网:预订度假屋、酒店、汽车租赁、机票等
2021/01/23 全球购物
C语言编程练习
2012/04/02 面试题
公司庆典活动邀请函
2014/01/09 职场文书
机械专业应届毕业生自荐书
2014/06/12 职场文书
浅析Python中的套接字编程
2021/06/22 Python