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实现打开本地文件或文件夹
Mar 09 Javascript
js验证表单大全
Nov 25 Javascript
javascript showModalDialog,open取得父窗口的方法
Mar 10 Javascript
JQuery页面的表格数据的增加与分页的实现
Dec 10 Javascript
改变隐藏的input中value的值代码
Dec 30 Javascript
Javascript单元测试框架QUnitjs详细介绍
May 08 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
May 17 Javascript
mui 打开新窗口的方式总结及注意事项
Aug 20 Javascript
详解Vue 全局引入bass.scss 处理方案
Mar 26 Javascript
浅析vue中常见循环遍历指令的使用 v-for
Apr 18 Javascript
JavaScript中变量提升与函数提升经典实例分析
Jul 26 Javascript
一行JavaScript代码如何实现瀑布流布局
Dec 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 随机生成10位字符代码
2009/03/26 PHP
destoon会员注册提示“数据校验失败(2)”解决方法
2014/06/21 PHP
使用PHP和HTML5 FormData实现无刷新文件上传教程
2014/09/06 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
php支付宝手机网页支付类实例
2015/03/04 PHP
PHP查询快递信息的方法
2015/03/07 PHP
jQuery DIV弹出效果实现代码
2009/07/03 Javascript
20个最新的jQuery插件
2012/01/13 Javascript
利用javascript实现web页面中指定区域打印
2013/10/30 Javascript
用JavaScript实现一个代码简洁、逻辑不复杂的多级树
2014/05/23 Javascript
javascript内置对象操作详解
2015/02/04 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jquery根据name取得select选中的值实例(超简单)
2018/01/25 jQuery
Node Mongoose用法详解【Mongoose使用、Schema、对象、model文档等】
2020/05/13 Javascript
jQuery实时统计输入框字数及限制
2020/06/24 jQuery
vue实现div可拖动位置也可改变盒子大小的原理
2020/09/16 Javascript
Python实现PS滤镜的旋转模糊功能示例
2018/01/20 Python
python编程使用协程并发的优缺点
2018/09/20 Python
Laravel+Dingo/Api 自定义响应的实现
2019/02/17 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python-django中的APPEND_SLASH实现方法
2019/06/21 Python
python关于变量名的基础知识点
2020/03/03 Python
Python实现七个基本算法的实例代码
2020/10/08 Python
CSS3 优势以及网页设计师如何使用CSS3技术
2009/07/29 HTML / CSS
HTML5注册表单的自动聚焦与占位文本示例代码
2013/07/19 HTML / CSS
蔻驰西班牙官网:COACH西班牙
2019/01/16 全球购物
女士鞋子、包包和服装在线,第一款10美元:ShoeDazzle
2019/07/26 全球购物
Lancer Skincare官方网站:抗衰老皮肤护理
2020/11/20 全球购物
Oracle中delete,truncate和drop的区别
2016/05/05 面试题
师范大学应届生求职信
2013/11/21 职场文书
治超工作实施方案
2014/05/04 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
群众路线教育实践活动总结
2014/10/30 职场文书
感谢信格式范文
2015/01/22 职场文书
毕业答辩开场白范文
2015/05/27 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python