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中常用的55个经典技巧
Aug 12 Javascript
javascript中关于执行环境的杂谈
Aug 14 Javascript
jQuery中before()方法用法实例
Dec 25 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jQuery实现鼠标点击弹出渐变层的方法
Jul 09 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
Sep 15 Javascript
JavaScript获取浏览器信息的方法
Nov 20 Javascript
AngularJS删除路由中的#符号的方法
Sep 20 Javascript
vue实现div拖拽互换位置
Jul 29 Javascript
vue-router 起步步骤详解
Mar 26 Javascript
微信小程序 生成携带参数的二维码
Oct 23 Javascript
小程序实现简单语音聊天的示例代码
Jul 24 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 VS ASP
2006/10/09 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
jquery tab标签页的制作
2010/05/10 Javascript
JavaScript 原型继承
2011/12/26 Javascript
js 自制滚动条的小例子
2013/03/16 Javascript
js跨域资源共享 基础篇
2016/07/02 Javascript
jstree的简单实例
2016/12/01 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
使用layer弹窗和layui表单实现新增功能
2018/08/09 Javascript
在vue中多次调用同一个定义全局变量的实例
2018/09/25 Javascript
VUE.js实现动态设置输入框disabled属性
2019/10/28 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
[09:23]国际邀请赛采访专栏:iG战队VK,Tongfu战队Cu
2013/08/05 DOTA
基于Python如何使用AIML搭建聊天机器人
2016/01/27 Python
Python连接DB2数据库
2016/08/27 Python
python查询mysql,返回json的实例
2018/03/26 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
10分钟教你用Python实现微信自动回复功能
2018/11/28 Python
python实现多张图片拼接成大图
2019/01/15 Python
对DJango视图(views)和模版(templates)的使用详解
2019/07/17 Python
python 字符串常用方法汇总详解
2019/09/16 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
dpn网络的pytorch实现方式
2020/01/14 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
HTML5之语义标签介绍
2016/07/07 HTML / CSS
鞋子女王塔玛拉·梅隆同名奢侈品牌:Tamara Mellon
2017/11/22 全球购物
理肤泉俄罗斯官网:La Roche-Posay俄罗斯
2018/07/24 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
应届毕业生个人自我评价
2013/09/20 职场文书
六一儿童节主持词
2014/03/21 职场文书
寒假家长评语大全
2014/04/16 职场文书
班组建设经验交流材料
2014/05/12 职场文书
好书伴我成长演讲稿
2014/05/14 职场文书
5.12护士节活动总结
2015/02/10 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL