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优化效率 提升性能解决方案
Sep 06 Javascript
深入理解JavaScript系列(13) This? Yes,this!
Jan 18 Javascript
js中键盘事件实例简析
Jan 10 Javascript
jQuery实现分隔条左右拖动功能
Nov 21 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
手机端实现Bootstrap简单图片轮播效果
Oct 13 Javascript
在vue中给列表中的奇数行添加class的实现方法
Sep 05 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
Dec 12 Javascript
JS正则表达式常见函数与用法小结
Apr 13 Javascript
react中props 的使用及进行限制的方法
Apr 28 Javascript
JavaScript中的LHS和RHS分析详情
Apr 06 Javascript
React如何使用axios请求数据并把数据渲染到组件
Aug 05 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中MD5函数使用实例代码
2008/06/07 PHP
php Notice: Undefined index 错误提示解决方法
2010/08/29 PHP
php的$_FILES的临时储存文件与回收机制实测过程
2013/07/12 PHP
通过Mootools 1.2来操纵HTML DOM元素
2009/09/15 Javascript
js实现的跟随鼠标移动的时钟效果(中英文日期显示)
2011/01/17 Javascript
JS编程小常识很有用
2012/11/26 Javascript
手机平板等移动端适配跳转URL的js代码
2014/01/25 Javascript
一个CSS+jQuery实现的放大缩小动画效果
2014/02/19 Javascript
原生js模拟淘宝购物车项目实战
2015/11/18 Javascript
Bootstrapvalidator校验、校验清除重置的实现代码(推荐)
2016/09/28 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
小程序登录/注册页面设计的实现代码
2019/05/24 Javascript
原生JS实现顶部导航栏显示按钮+搜索框功能
2019/12/25 Javascript
JavaScript实现动态生成表格
2020/08/02 Javascript
谈谈JavaScript令人迷惑的==与+
2020/08/31 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
详解Python中的条件判断语句
2015/05/14 Python
浅析python打包工具distutils、setuptools
2018/04/20 Python
Python 网络爬虫--关于简单的模拟登录实例讲解
2018/06/01 Python
基于python实现聊天室程序
2018/07/27 Python
python中while和for的区别总结
2019/06/28 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
pandas 如何分割字符的实现方法
2019/07/29 Python
python+selenium 鼠标事件操作方法
2019/08/24 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
jupyter notebook实现显示行号
2020/04/13 Python
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
Ajax的优点和缺点
2014/11/21 面试题
管理学专业个人求职信范文
2013/12/13 职场文书
四好少年事迹材料
2014/01/12 职场文书
小学数学国培感言
2014/03/10 职场文书
小学生竞选班干部演讲稿(5篇)
2014/09/12 职场文书
社会主义核心价值观主题教育活动总结
2015/05/07 职场文书
2017公司年会主持人开幕词
2016/03/04 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
SQL Server数据定义——模式与基本表操作
2021/04/05 SQL Server