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玩转游戏物理(一)运动学模拟与粒子系统
Jun 19 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
jquery form 隐藏的input 选择
Apr 29 Javascript
jQuery常用且重要方法汇总
Jul 13 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
Aug 07 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
Mar 13 Javascript
详解Vue 动态组件与全局事件绑定总结
Nov 11 Javascript
详解小程序设置缓存并且不覆盖原有数据
Apr 15 Javascript
使用vue实现各类弹出框组件
Jul 03 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
JavaScript实现简单日历效果
Sep 11 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中随机显示图片的函数代码
2011/06/23 PHP
php防止sql注入简单分析
2015/03/18 PHP
php自定义类fsocket模拟post或get请求的方法
2015/07/31 PHP
js中获取事件对象的方法小结
2011/03/13 Javascript
JQuery+CSS提示框实现思路及代码(纯手工打造)
2013/05/07 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
JavaScript基于ajax编辑信息用法实例
2015/07/15 Javascript
js实现获取当前时间是本月第几周的方法
2015/08/11 Javascript
谈一谈js中的执行环境及作用域
2016/03/30 Javascript
Vue iview-admin框架二级菜单改为三级菜单的方法
2018/07/03 Javascript
JS+H5 Canvas实现时钟效果
2018/07/20 Javascript
详解redux异步操作实践
2018/08/15 Javascript
在Vue-cli里应用Vuex的state和mutations方法
2018/09/16 Javascript
Nodejs使用archiver-zip-encrypted库加密压缩文件时报错(解决方案)
2019/11/18 NodeJs
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
解决微信小程序scroll-view组件无横向滚动的问题
2020/02/04 Javascript
python实现360的字符显示界面
2014/02/21 Python
python下载文件时显示下载进度的方法
2015/04/02 Python
Python开发的HTTP库requests详解
2017/08/29 Python
Appium Python自动化测试之环境搭建的步骤
2019/01/23 Python
Pythony运维入门之Socket网络编程详解
2019/04/15 Python
react+django清除浏览器缓存的几种方法小结
2019/07/17 Python
Python学习笔记之lambda表达式用法详解
2019/08/08 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
python求前n个阶乘的和实例
2020/04/02 Python
python中四舍五入的正确打开方式
2021/01/18 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
详解canvas绘制网络字体几种方法
2019/08/27 HTML / CSS
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
印度网上购物首选目的地:Flipkart
2016/08/01 全球购物
台湾最大网路书店:博客来
2018/03/18 全球购物
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
妇女儿童发展规划实施方案
2014/03/16 职场文书
教学副校长工作总结
2015/08/13 职场文书
创业计划书之物流运送
2019/09/17 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书