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读取ASP设定的COOKIE
Feb 15 Javascript
js删除所有的cookie的代码
Nov 25 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
node.js实现多图片上传实例
Jun 03 Javascript
jQuery实现的鼠标经过时变宽的效果(附demo源码)
Apr 28 Javascript
JavaScript中的对象和原型(一)
Aug 12 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
Aug 09 Javascript
回顾Javascript React基础
Jun 15 Javascript
Vue.js组件使用props传递数据的方法
Oct 19 Javascript
微信小程序实用代码段(收藏版)
Dec 17 Javascript
Vue如何实现验证码输入交互
Dec 07 Vue.js
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_merge下进行数组合并的代码
2008/07/22 PHP
php mysql Errcode: 28 终极解决方法
2009/07/01 PHP
php删除指定目录的方法
2015/04/03 PHP
PHP登录(ajax提交数据和后台校验)实例分享
2016/12/29 PHP
PHP使用preg_split()分割特殊字符(元字符等)的方法分析
2017/02/04 PHP
jquery学习笔记 用jquery实现无刷新登录
2011/08/08 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
捕获浏览器关闭、刷新事件不同情况下的处理方法
2013/06/02 Javascript
jQuery动画效果-slideUp slideDown上下滑动示例代码
2013/08/28 Javascript
通过遮罩层实现浮层DIV登录的js代码
2014/02/07 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
JS正则表达式之非捕获分组用法实例分析
2016/12/28 Javascript
JS遍历对象属性的方法示例
2017/01/10 Javascript
Javascript实现信息滚动效果
2017/05/18 Javascript
js实现图片放大展示效果
2017/08/30 Javascript
Vue 获取数组键名的方法
2018/06/21 Javascript
Vue一次性简洁明了引入所有公共组件的方法
2018/11/28 Javascript
解决vue项目axios每次请求session不一致的问题
2020/10/24 Javascript
通过JS判断网页是否为手机打开
2020/10/28 Javascript
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
浅析Python的web.py框架中url的设定方法
2016/07/11 Python
numpy使用技巧之数组过滤实例代码
2018/02/03 Python
python使用TensorFlow进行图像处理的方法
2018/02/28 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
python dumps和loads区别详解
2020/02/04 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
CSS3实现精美横向滚动菜单按钮
2017/04/14 HTML / CSS
css3一款3D字体带阴影效果的实现步骤
2013/03/20 HTML / CSS
芭比波朗加拿大官方网站:Bobbi Brown Cosmetics CA
2020/11/05 全球购物
大学生创业计划书的范文
2014/01/07 职场文书
学校大课间活动方案
2014/01/30 职场文书
党员志愿者活动总结
2014/06/26 职场文书
校外活动方案
2014/08/28 职场文书
复兴之路纪录片观后感
2015/06/02 职场文书
恰同学少年观后感
2015/06/08 职场文书
男方家长婚礼答谢词
2015/09/29 职场文书