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/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
JavaScript 学习笔记之语句
Jan 14 Javascript
认识Knockout及如何使用Knockout绑定上下文
Dec 25 Javascript
JavaScript来实现打开链接页面的简单实例
Jun 02 Javascript
Web 开发中Ajax的Session 超时处理方法
Jan 19 Javascript
微信小程序之MaterialDesign--input组件详解
Feb 15 Javascript
详解Vue 2.0封装axios笔记
Jun 22 Javascript
react-native 完整实现登录功能的示例代码
Sep 11 Javascript
JavaScript实现随机数生成器(去重)
Oct 13 Javascript
关于JavaScript语句后面的分号问题
Dec 07 Javascript
vue.js使用v-model指令实现的数据双向绑定功能示例
May 22 Javascript
vue过滤器用法实例分析
Mar 15 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中session变量的销毁
2014/02/27 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Gird组件 Part-3:范例RSSFeed Viewer
2007/03/10 Javascript
Tab页界面,用jQuery及Ajax技术实现
2009/09/21 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
Extjs中的GridPanel隐藏列会显示在menuDisabled中解决方法
2013/01/27 Javascript
ECMAScript6函数默认参数
2015/06/12 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
利用Node.js编写跨平台的spawn语句详解
2017/02/12 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
vuejs使用递归组件实现树形目录的方法
2017/09/30 Javascript
基于vue-ssr的静态网站生成器VuePress 初体验
2018/04/17 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
JS立即执行函数功能与用法分析
2019/01/15 Javascript
js贪心算法 钱币找零问题代码实例
2019/09/11 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
Vue 解决通过this.$refs来获取DOM或者组件报错问题
2020/07/28 Javascript
构建一个JavaScript插件系统
2020/10/20 Javascript
Python中的并发处理之asyncio包使用的详解
2018/04/03 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python concurrent.futures模块使用实例
2019/12/24 Python
python3 pathlib库Path类方法总结
2019/12/26 Python
django xadmin 管理器常用显示设置方式
2020/03/11 Python
Python面向对象特殊属性及方法解析
2020/09/16 Python
CSS3文本换行word-wrap解决英文文本超过固定宽度不换行
2013/10/10 HTML / CSS
css3隔行变换色实现示例
2014/02/19 HTML / CSS
一张图片能隐含千言万语之隐藏你的程序代码
2012/12/13 HTML / CSS
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
维珍澳洲航空官网:Virgin Australia
2017/09/08 全球购物
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
SOA的常见陷阱或者误解是什么
2014/10/05 面试题
《望洞庭》教学反思
2014/02/16 职场文书
大一新生期末自我评价
2014/09/12 职场文书
浅谈mysql哪些情况会导致索引失效
2021/11/20 MySQL