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 BASE64编码 window.atob(), window.btoa()
Mar 09 Javascript
javascript动态加载二
Aug 22 Javascript
基于MVC3方式实现下拉列表联动(JQuery)
Sep 02 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
YUI模块开发原理详解
Nov 18 Javascript
多引号嵌套的变量命名的问题
May 09 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
JS匹配日期和时间的正则表达式示例
May 12 Javascript
jQuery Validate 校验多个相同name的方法
May 18 jQuery
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
Vue-input框checkbox强制刷新问题
Apr 18 Javascript
js实现自定义滚动条的示例
Oct 27 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 星际争霸
域名查询代码公布
2006/10/09 PHP
用PHP查询域名状态whois的类
2006/11/25 PHP
php 字符串替换的方法
2012/01/10 PHP
ThinkPHP函数详解之M方法和R方法
2015/09/10 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
PHP实现数组根据某个单元字段排序操作示例
2018/08/01 PHP
CL vs ForZe BO5 第二场 2.13
2021/03/10 DOTA
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
jQuery EasyUI API 中文文档 DateTimeBox日期时间框
2011/10/16 Javascript
JavaScript italics方法入门实例(把字符串显示为斜体)
2014/10/17 Javascript
node.js中的http.createClient方法使用说明
2014/12/15 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
nodemon实现Typescript项目热更新的示例代码
2019/11/19 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python去除所有html标签的方法
2015/05/05 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
Python爬虫工程师面试问题总结
2018/03/22 Python
Python @property使用方法解析
2019/09/17 Python
python实现实时视频流播放代码实例
2020/01/11 Python
Django使用rest_framework写出API
2020/05/21 Python
CSS3 实现倒计时效果
2020/11/25 HTML / CSS
京东港澳售:京东直邮港澳台
2018/01/31 全球购物
自荐信范文
2013/12/10 职场文书
小学生纪念九一八事变演讲稿
2014/09/14 职场文书
国庆节慰问信
2015/02/15 职场文书
求职推荐信范文
2015/03/27 职场文书
严以用权专题学习研讨会发言材料
2015/11/09 职场文书
乡镇干部学习心得体会
2016/01/23 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
golang 在windows中设置环境变量的操作
2021/04/29 Golang
帮你提高开发效率的JavaScript20个技巧
2021/06/18 Javascript
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
Mysql 文件配置解析介绍
2022/05/06 MySQL
python实现双链表
2022/05/25 Python