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. Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用???

    Math.min()和 Math.max()  语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...

  2. 学习日记17,、、通过反射获取model实体属性display的值

    本来是想到网上直接找个用的,但是找的一些都不是我想要的,然后就参考自己摸索写了一个 这里的UserModel是我自己定义的一个实体类,代码就不用放出来了 var t = typeof(UserMode ...

  3. [CSP-S模拟测试]:导弹袭击(数学+凸包+单调栈)

    题目背景 $Guess$准备向敌军阵地发起进攻了!$Guess$的武器是自动制导导弹.然而在机房是不允许游戏的,所以班长$XZY$对游戏界面进行了降维打击,结果... 题目描述 众所周知,环境因素对导 ...

  4. IDEA简单破解激活操作流程(我在用的)

    其实简单的,你需要下一个包,将他放入你的IDEA安装目录的bin下,如下下图 下载地址:https://pan.baidu.com/s/1aJDefDGmfYGrkcJCpZYccA 看到红线的地方了 ...

  5. selinux 关闭

    查看SELinux状态: 1./usr/sbin/sestatus -v      ##如果SELinux status参数为enabled即为开启状态 SELinux status:         ...

  6. TypeScript快速笔记(一)

    刚学习TypeScript,但因为马上要用,主要是寻求先快速上手,而后再求精. 推荐学习网站: 1)https://www.runoob.com/typescript/ts-tutorial.html ...

  7. kubernetes-traefik(二十一)

    参考文档:http://traefik.cn/ traefik和ingress的对比 ingress: 使用nginx作为前端负载均衡,通过ingress controller不断的和kubernet ...

  8. MySQL主从复制之半同步模式

    MySQL主从复制之半同步模式 MySQL半同步介绍: 一般情况下MySQL默认复制模式为异步,何为异步?简单的说就是主服务器上的I/O threads 将binlog写入二进制日志中就返回给客户端一 ...

  9. 使用wxpy模块了解微信好友

    网上看了一篇python文章,内容简单有趣,正好可以练习一下.原文连接:http://mp.weixin.qq.com/s/oI2pH8uvq4kwYqc4kLMjuA 一.环境:Windows+py ...

  10. 测开之路一百零四:jquery操作样式

    jquery操作样式 添加样式.删除样式 切换样式 css("属性","值") css("属性","值"), 修改多个 ...