使用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 tips提示效果
Apr 03 Javascript
Jquery颜色选择器ColorPicker实现代码
Nov 14 Javascript
jQuery中:lt选择器用法实例
Dec 29 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
AngularJS学习笔记之依赖注入详解
May 16 Javascript
jQuery+ajax的资源回收处理机制分析
Jan 07 Javascript
vue的基本用法与常见指令
Aug 15 Javascript
微信小程序收藏功能的实现代码
Jun 12 Javascript
使用vue实现多规格选择实例(SKU)
Aug 23 Javascript
js实现小时钟效果
Mar 25 Javascript
javascript实现左右缓动动画函数
Nov 25 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
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存储过程调用实例代码
2013/02/03 PHP
ASP和PHP实现生成网站快捷方式并下载到桌面的方法
2014/05/08 PHP
php对包含html标签的字符串进行截取的函数分享
2014/06/19 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
php中实现进程锁与多进程的方法
2016/09/18 PHP
Yii框架实现对数据库的CURD操作示例
2019/09/03 PHP
PHP实现微信公众号验证Token的示例代码
2019/12/16 PHP
php设计模式之抽象工厂模式分析【星际争霸游戏案例】
2020/01/23 PHP
基于PHP的微信公众号的开发流程详解
2020/08/07 PHP
javascript 强制刷新页面的实现代码
2009/12/13 Javascript
js constructor的实际作用分析
2011/11/15 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
2016/03/01 Javascript
浅谈Javascript中的Label语句
2016/12/14 Javascript
JS实现网页抢购功能(触发,终止脚本)
2017/11/27 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
Node批量爬取头条视频并保存方法
2018/09/20 Javascript
使用js实现一个简单的滚动条过程解析
2019/09/10 Javascript
python获取从命令行输入数字的方法
2015/04/29 Python
Python基于二分查找实现求整数平方根的方法
2016/05/12 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python二叉树的定义及常用遍历算法分析
2017/11/24 Python
使用Python实现毫秒级抢单功能
2019/06/06 Python
用python写一个带有gui界面的密码生成器
2020/11/06 Python
python 读取串口数据的示例
2020/11/09 Python
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
中间件分为哪几类
2012/03/14 面试题
初中美术教学反思
2014/01/29 职场文书
小学体育教学反思
2014/01/31 职场文书
预备党员2014年第四季度思想汇报范文
2014/10/25 职场文书
2014年保洁工作总结
2014/11/24 职场文书
模范教师材料大全
2014/12/16 职场文书
校园歌手大赛主持词
2015/07/03 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
竞选稿之小学班干部
2019/10/31 职场文书
SQL Server基本使用和简单的CRUD操作
2021/04/05 SQL Server
基于Go Int转string几种方式性能测试
2021/04/28 Golang