使用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 相关文章推荐
JavaScript 字符串处理函数使用小结
Dec 02 Javascript
jQuery焦点图切换简易插件制作过程全纪录
Aug 27 Javascript
jQuery淡入淡出元素让其效果更为生动
Sep 01 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
Bootstrap选项卡与Masonry插件的完美结合
Jul 06 Javascript
vue项目中api接口管理总结
Apr 20 Javascript
利用vue.js把静态json绑定bootstrap的table方法
Aug 28 Javascript
cocos2dx+lua实现橡皮擦功能
Dec 20 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 Javascript
vue v-for直接循环数字实例
Nov 07 Javascript
javascript实现的图片预览和上传功能示例【兼容IE 9】
May 01 Javascript
AJAX XMLHttpRequest对象创建使用详解
Aug 20 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扩展CURL的用法详解
2014/06/20 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
phpcms中的评论样式修改方法
2016/10/21 PHP
使用Codeigniter重写insert的方法(推荐)
2017/03/23 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP判断是否微信访问的方法示例
2019/03/27 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
JavaScript 异步调用框架 (Part 2 - 用例设计)
2009/08/03 Javascript
JQuery实现倒计时按钮的实现代码
2012/03/23 Javascript
mailto的使用技巧分享
2012/12/21 Javascript
javascript中强制执行toString()具体实现
2013/04/27 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
使用javascript实现雪花飘落的效果
2015/01/13 Javascript
JavaScript中的时间处理小结
2016/02/24 Javascript
Bootstrap3学习笔记(三)之表格
2016/05/20 Javascript
jQuery+pjax简单示例汇总
2017/04/21 jQuery
Validform验证时可以为空否则按照指定格式验证
2017/10/20 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
vue.js实现点击图标放大离开时缩小的代码
2021/01/27 Vue.js
[42:20]2014 DOTA2华西杯精英邀请赛5 24 DK VS NewBee
2014/05/25 DOTA
利用Python的Flask框架来构建一个简单的数字商品支付解决方案
2015/03/31 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
python实现二维数组的对角线遍历
2019/03/02 Python
Python寻找路径和查找文件路径的示例
2019/07/10 Python
Python 窗体(tkinter)下拉列表框(Combobox)实例
2020/03/04 Python
python时间序列数据转为timestamp格式的方法
2020/08/03 Python
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
生产厂厂长岗位职责
2013/12/25 职场文书
离职证明标准格式
2014/09/15 职场文书
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
2021/04/17 Vue.js
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
Mysql案例刨析事务隔离级别
2021/09/25 MySQL