mounted() {
this.$refs.scrollTable.addEventListener( 'scroll',(event) => {
this.getDistance(event);
});
} methods() {
getDistance(event) {
let dom = enent.target;
const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight
if(scrollDistance <=0){//等于0证明已经到底,可以请求接口
// do something
}
}
}

遗留问题:当x轴也滚动时,会影响distance判断

监听table滚动事件,滚动到底部时加载数据的更多相关文章

  1. vue使用H5实现滚动到页面底部时加载数据

    使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...

  2. jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  3. js 窗口滚动到一定高度时加载数据

    <script type="text/javascript"> //当窗口滚动到一定高度时 某块页面开始加载数据 window.onload = function() ...

  4. ionic ion-list 滑到底部自动加载数据案例

    <ion-content> <ion-list> <ion-item ng-repeat="item in items track by $index" ...

  5. 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据

    今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...

  6. js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符

    js中对arry数组的各种操作小结   最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...

  7. Android中GridView滚动到底部加载数据终极版

    之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...

  8. 当滚动条滚动到页面底部自动加载增加内容的js代码

    这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...

  9. JS 判断滚动底部并加载更多效果。。。。。。。。。

    JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...

随机推荐

  1. SSM图片

    非关系型数据,redis,mongoDB关系型数据,mysql,oracle 1.springmvc+spring+mybatis1.导入jar2.书写配置xml(applicationContext ...

  2. spring IOC(Spring 生命周期,先1.构造方式,2,初始化方法,3,目标方法,4,销毁方法)

  3. 微信小程序支付功能讲解

    前言:虽然小程序做过很多,但是一直觉得微信支付功能很是神秘,现在终于有机会接触心里还是有点小激动的,经过一番折腾发现支付也不过如此,在此记录下支付功能的实现过程 小程序的官方文档介绍到发起微信支付即调 ...

  4. 高通Android camera运行流程【转】

    本文转载自:http://blog.csdn.net/unicornkylin/article/details/13293295 1.总体架构 Android Camera 框架从整体上看是一个 cl ...

  5. XML的基础之一(概念和语法)

    XML的基础(概念和语法) xml html 概念 异同  XML全称为extensible markup language,即可扩展标记语言,简单理解为可预定义标签的编程语言.它与HTML(超文本标 ...

  6. 通过HookNtCreateSection 动态监控驱动sys、动态链接库dll、可执行文件exe加载

    [cpp] view plaincopyprint? /* windows2003 x86/x64 window7 x86 windows2008 R2 x64测试通过 */ #include < ...

  7. 004-unity3d MonoBehaviour脚本方法简介

    一.MonoBehaviour 1.公共方法 CancelInvoke Cancels all Invoke calls on this MonoBehaviour. Invoke Invokes t ...

  8. 《图解设计模式》读书笔记7-2 Mediator模式

    目录 Mediator模式简介 示例程序 示例程序类图 代码 Mediator模式角色和类图 角色 模式类图 思路拓展 简单化 角色复用 Mediator模式简介 Mediator模式即中介者模式,可 ...

  9. Oracle数据库文件导出为CSV格式的方法

    1 安装PLSQL Developer,并连接Oracle数据库. 2 执行sql语句,将要导出的表格显示出来. select * from table名; 3 如下点击导出查询结果,选择数据格式,即 ...

  10. C++中的通用结构定义,及相应的序列化、反序列化接口

    一个通用的C++结构定义如下: typedef struct tagCommonStruct { long len; void* buff; }CommonStruct_st; 此接口对应的普通序列化 ...