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 相关文章推荐
XHTML-Strict 内允许出现的标签
Dec 11 Javascript
javascript 面向对象编程 万物皆对象
Sep 17 Javascript
jQuery:节点(插入,复制,替换,删除)操作
Mar 04 Javascript
用js实现trim()的解决办法
Apr 16 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
Dec 02 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
Oct 08 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
layui中使用jquery控制radio选中事件的示例代码
Aug 15 jQuery
通过微信公众平台获取公众号文章的方法示例
Dec 25 Javascript
vue跳转页面的几种方法(推荐)
Mar 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
星际争霸中的热键
2020/03/04 星际争霸
php 数学运算验证码实现代码
2009/10/11 PHP
PHP判断图片格式的七种方法小结
2013/06/03 PHP
PHP动态规划解决0-1背包问题实例分析
2015/03/23 PHP
JavaScript delete 属性的使用
2009/10/08 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
JavaScript通过prototype给对象定义属性用法实例
2015/03/23 Javascript
javascript性能优化之事件委托实例详解
2015/12/12 Javascript
JS中touchstart事件与click事件冲突的解决方法
2018/03/12 Javascript
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
2019/01/09 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
2019/04/16 Javascript
vue项目首屏加载时间优化实战
2019/04/23 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
Django+Vue实现WebSocket连接的示例代码
2019/05/28 Javascript
js重写alert事件(避免alert弹框标题出现网址)
2020/12/04 Javascript
基于JavaScript实现随机点名器
2021/02/25 Javascript
[02:32]DOTA2英雄基础教程 祸乱之源
2013/12/23 DOTA
python3+PyQt5重新实现QT事件处理程序
2018/04/19 Python
Python实现的本地文件搜索功能示例【测试可用】
2018/05/30 Python
解决tensorflow测试模型时NotFoundError错误的问题
2018/07/26 Python
Python比较配置文件的方法实例详解
2019/06/06 Python
python实现串口通信的示例代码
2020/02/10 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
Reebok俄罗斯官方网上商店:购买锐步运动服装和鞋子
2016/09/26 全球购物
年度考核自我鉴定
2014/02/02 职场文书
入党申请自荐书范文
2014/02/11 职场文书
历史学专业求职信
2014/06/19 职场文书
委托证明模板
2014/09/16 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
学生检讨书范文
2014/10/30 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
土建施工员岗位职责
2015/04/11 职场文书
对公司的意见和建议
2015/06/04 职场文书
python基础入门之字典和集合
2021/06/13 Python
node.js如何自定义实现一个EventEmitter
2021/07/16 Javascript