使用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 相关文章推荐
js实现addClass,removeClass,hasClass的函数代码
Jul 13 Javascript
解决JS浮点数运算出现Bug的方法
Mar 12 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
Angular实现较为复杂的表格过滤,删除功能示例
Dec 23 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 Javascript
Vue extend的基本用法(实例详解)
Dec 09 Javascript
jQuery实现弹出层效果
Dec 10 jQuery
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
Jul 24 Javascript
关于React Native使用axios进行网络请求的方法
Aug 02 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 fsockopen写的HTTP下载的类
2007/02/22 PHP
10个值得深思的PHP面试题
2016/11/14 PHP
PHP简单获取上月、本月、近15天、近30天的方法示例
2017/07/03 PHP
通过修改Laravel Auth使用salt和password进行认证用户详解
2017/08/17 PHP
PHP For循环字母A-Z当超过26个字母时输出AA,AB,AC
2020/02/16 PHP
jQuery live( type, fn ) 委派事件实现
2009/10/11 Javascript
javascript 操作Word和Excel的实现代码
2009/10/26 Javascript
jquery改变tr背景色的示例代码
2013/12/28 Javascript
js实现超简单的展开、折叠目录代码
2015/08/28 Javascript
javascript中checkbox使用方法简单实例演示
2015/11/17 Javascript
微信小程序 框架详解及实例应用
2016/09/26 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
基于Require.js使用方法(总结)
2017/10/26 Javascript
Vue利用canvas实现移动端手写板的方法
2018/05/03 Javascript
老生常谈JavaScript获取CSS样式的方法(兼容各浏览器)
2018/09/19 Javascript
JS查找孩子节点简单示例
2019/07/25 Javascript
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python中str.format()详解
2017/03/12 Python
python中如何使用朴素贝叶斯算法
2017/04/06 Python
OpenCV2.3.1+Python2.7.3+Numpy等的配置解析
2018/01/05 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python实现每天自动签到领积分的示例代码
2020/08/18 Python
html5指南-3.如何实现html元素拖拽功能
2013/01/07 HTML / CSS
三维科技面试题
2013/07/27 面试题
如何用Java实现列出某个目录下的所有子目录
2015/07/20 面试题
如何理解transaction事务的概念
2015/05/27 面试题
市场营销毕业生自荐信范文
2014/04/01 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
初二学习计划书范文
2014/04/27 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
五年级作文之学校的四季
2019/12/05 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
分享3个非常实用的 Python 模块
2022/03/03 Python
【海涛解说】暗牧也疯狂,牛蛙成配角
2022/04/01 DOTA
Java异常体系非正常停止和分类
2022/06/14 Java/Android