1. mounted() {
  2. this.$refs.scrollTable.addEventListener( 'scroll',(event) => {
  3. this.getDistance(event);
  4. });
  5. }
  6.  
  7. methods() {
  8. getDistance(event) {
  9. let dom = enent.target;
  10. const scrollDistance =dom.scrollHeight - dom.scrollTop - dom.clientHeight
  11. if(scrollDistance <=0){//等于0证明已经到底,可以请求接口
  12. // do something
  13. }
  14. }
  15. }

遗留问题:当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. DI,依赖注入,给对象赋值 ,get,set

    DI,依赖注入,给对象赋值 ,get,set给对象赋值 2种方式:1.get.set默认无参构造方法给对象赋值 2.xml中有参构造器方法给对象赋值

  2. TCP学习笔记

    TCP/IP 协议分层模型 TCP/IP 协议族按层次分别分为以下 4 层:应用层.传输层.网络层和数据链路层.层次化之后,每个层级只需要考虑自己的任务就可以了,不再需要弄清其他层级的功能了. TCP ...

  3. IIS发布mvc网站需操作的内容

    VS2010 WEB部署,先在IIS中创建站点,站点创建需注意以下的内容,创建完成后点击[发布]---[WEB部署]--[发布]. 在IIS7下部署MVC已经简化了许多,基本按照一般的项目部署即可,下 ...

  4. Spark Streaming的优化之路—从Receiver到Direct模式

    作者:个推数据研发工程师 学长     1 业务背景   随着大数据的快速发展,业务场景越来越复杂,离线式的批处理框架MapReduce已经不能满足业务,大量的场景需要实时的数据处理结果来进行分析.决 ...

  5. lambda匿名函数和内置函数

    对于简单的函数,也存在一种简便的表示方式,即:lambda表达式 定义函数(普通方式) def func(arg):     return arg + 1      执行函数 result = fun ...

  6. vue-router 2.0 跳转之router.push()

    router.push(location) 除了使用 创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现. router.push(location) 想要导航 ...

  7. Oracle JET(二)Oracle JET使用

    Oracle JET 开发分为 Web 应用程序开发和移动应用程序开发(WebApp). Oracle JET Web 应用程序开发入门: 使用方法三种: 使用 Oracle JET Yeoman 生 ...

  8. Java的参数传递是值传递?

    引用传递和值传递的区别.(不先说定义的都是在耍流氓!) 按值调用(call by value) : 在参数传递过程中,形参和实参占用了两个完全不同的内存空间.形参所存储的内容是实参存储内容的一份拷贝. ...

  9. 三十七、python中的logging介绍

    A.单文件日志 import logging#定义日志文件#文件格式logging.basicConfig(filename='log.log', format='%(asctime)s-%(name ...

  10. python使用__new__创建一个单例模式(单例对象)

    #单例模式:使一个类只产生一个对象.他们的id地址都指向同一个内存地址 第一步:理解谁创建了对象 # 单例模式# 首先明白,我们在创建一个类的对象的时候,其实是调用的这个类的父类,即继承object, ...