使用vue.js在页面内组件监听scroll事件的方法


Posted in Javascript onSeptember 11, 2018

思路:scroll在哪儿个组件内,就在获取那个dom元素。网上好多思路是

window.addEventListener("scroll", function(){
  console.log('scrolling');
  });

这是监听不到的!如果你整个网页可以滑动,或许还可以试试!

对于像我这样,只在页面的内的一个div内要监听的。

实现代码如下:

第一步:滑动的组件外层的div加 ref="viewBox" 为了通过$refs获取dom元素

<!--设备列表-->
<div class="deviceWrapper" ref="viewBox">
 <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="refresh"/>
 <div class="demo-grid">
 <!--设备列表 手机一行两列 pad一行4列-->
 <mu-row>
  <mu-col v-for="device in devicesList" width="50" tablet="25" desktop="25">
  <deviceCardView :device-data="device""></devicelightCardView>
  </mu-col>
 </mu-row>
 </div>
 <p class="bottomLine" v-bind:class="{bottomLineVisible:isScroll}">---------------------我是有底线的---------------------</p>
</div>

第二步:

mounted() {
// 通过$refs获取dom元素
 this.box = this.$refs.viewBox
 // 监听这个dom的scroll事件
 this.box.addEventListener('scroll', () => {
 console.log(" scroll " + this.$refs.viewBox.scrollTop)
 //以下是我自己的需求,向下滚动的时候显示“我是有底线的(类似支付宝)”
 this.isScroll=this.$refs.viewBox.scrollTop>0
 }, false)
}

ps:具体怎么做,看需求了。只要能打印出来.scrollTop就行了

以上这篇使用vue.js在页面内组件监听scroll事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
Javascript 闭包引起的IE内存泄露分析
May 23 Javascript
侧栏跟随滚动的简单实现代码
Mar 18 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
node.js入门教程
Jun 01 Javascript
使用mini-define实现前端代码的模块化管理
Dec 25 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
JQuery fileupload插件实现文件上传功能
Mar 18 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
vue.js实现回到顶部动画效果
Jul 31 Javascript
vue+flask实现视频合成功能(拖拽上传)
Mar 04 Vue.js
JavaScript 去重和重复次数统计
Mar 31 Javascript
vue+axios+element ui 实现全局loading加载示例
Sep 11 #Javascript
Webpack之tree-starking 解析
Sep 11 #Javascript
node.js之基础加密算法模块crypto详解
Sep 11 #Javascript
Vue在页面数据渲染完成之后的调用方法
Sep 11 #Javascript
浅谈Webpack核心模块tapable解析
Sep 11 #Javascript
原生js检测页面加载完毕的实例
Sep 11 #Javascript
vue props传值失败 输出undefined的解决方法
Sep 11 #Javascript
You might like
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
ThinkPHP实现ajax仿官网搜索功能实例
2014/12/02 PHP
PHP中addslashes与mysql_escape_string的区别分析
2016/04/25 PHP
jQuery中文入门指南,翻译加实例,jQuery的起点教程
2007/01/13 Javascript
避免 showModalDialog 弹出新窗体的原因分析
2010/05/31 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
2011/09/22 Javascript
JavaScript判断密码强度(自写代码)
2013/09/06 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
js中用window.open()打开多个窗口的name问题
2014/03/13 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
JavaScript实现的浮动层框架用法实例分析
2015/10/10 Javascript
Javascript BOM学习小结(六)
2015/11/26 Javascript
jQuery实现页面评论栏中访客信息自动填写功能的方法
2016/05/23 Javascript
深入分析javascript中console命令
2016/08/14 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
基于vue2.x的电商图片放大镜插件的使用
2018/01/22 Javascript
es6数值的扩展方法
2019/03/11 Javascript
使用webpack编译es6代码的方法步骤
2019/04/28 Javascript
[02:33]2018DOTA2亚洲邀请赛赛前采访——LGD
2018/04/04 DOTA
python绘制铅球的运行轨迹代码分享
2017/11/14 Python
Python实现的json文件读取及中文乱码显示问题解决方法
2018/08/06 Python
详解django中url路由配置及渲染方式
2019/02/25 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python缓存技术实现过程详解
2019/09/25 Python
Pygame的程序开始示例代码
2020/05/07 Python
python爬取youtube视频的示例代码
2021/03/03 Python
探索HTML5本地存储功能运用技巧
2016/03/02 HTML / CSS
高山背包:High Sierra
2017/11/23 全球购物
智乐游戏测试笔试题
2014/05/21 面试题
经典优秀个人求职信分享
2013/12/12 职场文书
2014年两会学习心得体会
2014/03/17 职场文书
联片教研活动总结
2014/07/01 职场文书
微信搭讪开场白
2015/05/28 职场文书
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS
MySQL优化之慢日志查询
2022/06/10 MySQL
MySQL详解进行JDBC编程与增删改查方法
2022/06/16 MySQL