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 相关文章推荐
JS制作手机端自适应缩放显示
Jun 11 Javascript
详解JavaScript中jQuery和Ajax以及JSONP的联合使用
Aug 13 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
微信小程序 wxapp内容组件 text详细介绍
Oct 31 Javascript
JavaScript日期对象(Date)基本用法示例
Jan 18 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
vue异步加载高德地图的实现
Jun 19 Javascript
JS实现图片上传多次上传同一张不生效的处理方法
Aug 06 Javascript
vue2实现搜索结果中的搜索关键字高亮的代码
Aug 29 Javascript
jQuery事件blur()方法的使用实例讲解
Mar 30 jQuery
vue 动态组件用法示例小结
Mar 06 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/07/21 PHP
thinkPHP数据库增删改查操作方法实例详解
2016/12/06 PHP
PHP大文件切割上传并带进度条功能示例
2019/07/01 PHP
js 覆盖和重载 函数
2009/09/25 Javascript
网页防止tab键的使用快速解决方法
2013/11/07 Javascript
js函数名与form表单元素同名冲突的问题
2014/03/07 Javascript
JQuery CheckBox(复选框)操作方法汇总
2015/04/15 Javascript
理解jquery事件冒泡
2016/01/03 Javascript
浅谈JavaScript对象的创建方式
2016/06/13 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
2016/09/19 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
vue中axios解决跨域问题和拦截器的使用方法
2018/03/07 Javascript
vue基于element的区间选择组件
2018/09/07 Javascript
微信小程序框架wepy之动态控制类名
2018/09/14 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
2019/06/10 Javascript
python通过pil为png图片填充上背景颜色的方法
2015/03/17 Python
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
Python 安装setuptools和pip工具操作方法(必看)
2017/05/22 Python
python 多线程对post请求服务器测试并发的方法
2019/06/13 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Django 框架模型操作入门教程
2019/11/05 Python
python实现小世界网络生成
2019/11/21 Python
Python warning警告出现的原因及忽略方法
2020/01/31 Python
python 错误处理 assert详解
2020/04/20 Python
基于selenium及python实现下拉选项定位select
2020/07/22 Python
Python计算矩阵的和积的实例详解
2020/09/10 Python
css3 实现元素弧线运动的示例代码
2020/04/24 HTML / CSS
AmazeUI 点击元素显示全屏的实现
2020/08/25 HTML / CSS
简历中求职的个人自我评价
2013/12/03 职场文书
护士自我评价
2014/02/01 职场文书
初中语文教师研修日志
2015/11/13 职场文书
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
「SHOW BY ROCK!!」“雫シークレットマインド”组合单曲MV公开
2022/03/21 日漫
MySQL创建管理LIST分区
2022/04/13 MySQL
Spring Boot接口定义和全局异常统一处理
2022/04/20 Java/Android