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 相关文章推荐
jquery 简单的进度条实现代码
Mar 11 Javascript
jquery实现盒子下拉效果示例代码
Sep 12 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
微信小程序 解析网页内容详解及实例
Feb 22 Javascript
JS实现的五级联动菜单效果完整实例
Feb 23 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
Mar 01 Javascript
angular学习之ngRoute路由机制
Apr 12 Javascript
网页中的图片查看器viewjs使用方法
Jul 11 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
May 10 Javascript
vue利用全局导航守卫作登录后跳转到未登录前指定页面的实例代码
May 19 Javascript
如何构建一个Vue插件并生成npm包
Oct 26 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
ip签名探针
2006/10/09 PHP
php之对抗Web扫描器的脚本技巧
2008/10/01 PHP
ThinkPHP模板范围判断输出In标签与Range标签用法详解
2014/06/30 PHP
tp5(thinkPHP5)框架实现多数据库查询的方法
2019/01/10 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
mouse_on_title.js
2006/08/25 Javascript
jQuery asp.net 用json格式返回自定义对象
2010/04/07 Javascript
JavaScript将相对地址转换为绝对地址示例代码
2013/07/19 Javascript
js处理json以及字符串的比较等常用操作
2013/09/08 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
2014/01/14 Javascript
JavaScript二维数组实现的省市联动菜单
2014/05/08 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JavaScript获取指定元素位置的方法
2015/04/08 Javascript
JavaScript实现点击文字切换登录窗口的方法
2015/05/11 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
向JavaScript的数组中添加元素的方法小结
2015/10/24 Javascript
AngularJS中比较两个数组是否相同
2016/08/24 Javascript
jQuery中常用动画效果函数(日常整理)
2016/09/17 Javascript
网站发布后Bootstrap框架引用woff字体无法正常显示的解决方法
2016/11/24 Javascript
简单实现js拖拽效果
2017/07/25 Javascript
详解从买域名到使用pm2部署node.js项目全过程
2018/03/07 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
2018/09/04 Javascript
Python 转换文本编码实现解析
2019/08/27 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
基于tensorflow for循环 while循环案例
2020/06/30 Python
好的自荐信包括什么内容
2013/11/07 职场文书
加强作风建设演讲稿
2014/10/24 职场文书
简易离婚协议书范本
2014/10/24 职场文书
2014年办公室工作总结范文
2014/11/12 职场文书
商务宴请邀请函范文
2015/02/02 职场文书
团员个人总结
2015/02/26 职场文书
电子商务专业求职信范文
2015/03/19 职场文书
六一儿童节主持开场白
2015/05/28 职场文书
歌剧魅影观后感
2015/06/05 职场文书
毕业生就业推荐表自我鉴定
2019/06/20 职场文书
Python requests库参数提交的注意事项总结
2021/03/29 Python