监听table滚动事件,滚动到底部时加载数据
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滚动事件,滚动到底部时加载数据的更多相关文章
- vue使用H5实现滚动到页面底部时加载数据
使用原生vue实现瀑布流,发现无法实现小程序那种滚动到地步触发加载效果,只能自己研究了 实现效果: 实现代码: 首先添加监听滚动事件 mounted() { window.addEventListen ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- js 窗口滚动到一定高度时加载数据
<script type="text/javascript"> //当窗口滚动到一定高度时 某块页面开始加载数据 window.onload = function() ...
- ionic ion-list 滑到底部自动加载数据案例
<ion-content> <ion-list> <ion-item ng-repeat="item in items track by $index" ...
- 分享大麦UWP版本开发历程-03.GridView或ListView 滚动底部自动加载后续数据
今天跟大家分享的是大麦UWP客户端,在分类.订单或是搜索时都用到的一个小技巧,技术粗糙大神勿喷. 以大麦分类举例,默认打开的时候,会为用户展示20条数据,当用户滚动鼠标或者使用手势将列表滑动到倒数第二 ...
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件,兼容各大主流浏览器 HTML特殊字符
js中对arry数组的各种操作小结 最近工作比较轻松,于是就花时间从头到尾的对js进行了详细的学习和复习,在看书的过程中,发现自己平时在做项目的过程中有很多地方想得不过全面,写的不够合理,所以说啊 ...
- Android中GridView滚动到底部加载数据终极版
之前在项目中有一个需求是需要GridView控件,滚动到底部自动加载.但是呢GridView控件并不提供诸如ListView监听滚动到底部的onScrollListener方法,为了实现这样一个效果, ...
- 当滚动条滚动到页面底部自动加载增加内容的js代码
这篇文章主要介绍了如何使用javscript实现滚动条滚动到页面底部自动加载增加页面内容,需要的朋友可以参考下..1,注册页面滚动事件,window.onscroll = function(){ }; ...
- JS 判断滚动底部并加载更多效果。。。。。。。。。
JS 判断滚动底部并加载更多效果......... <html lang="zh-cn"> <head> <meta http-equiv=" ...
随机推荐
- for-in语句和with语句、break和continue语句
for-in语句 for-in语句是一种精准迭代语句,可以用来枚举对象的属性,用以遍历一个对象的全部属性. for…in声明用于对数组或者对象的属性进行循环操作: for…in循环中的代码每执行一次, ...
- [window] 使用Pyhton轻便好用的spyder IDE进行代码分析时如何指定相关的配置文件
spyder 使用pylint这个第三方库进行代码检查,其实pylint使用的代码规范默认也是pep8,不过该库还有 其它用途,在这里我专门写写在代码分析时,如何指定配置文件 一般来说,使用spyde ...
- mybatis学习$与#号取值区别
1,多个参数传递用map或实体封装后再传给myBatis, mybatis学习$与#号取值区别 #{} 1.加了单引号, 2.#号写是可以防止sql注入,比较安全 select * from use ...
- 完美解决linux不能编辑sshd_cofig和实现xshell远程连接的问题
第一步:我们使用命令行vim /etc/ssh/sshd_config 执行修改,强制保持 :wq! 系统不让我们修改这个文件 "/etc/ssh/sshd_config" ...
- Java框架之MybatisSQL注入漏洞
一.SQL注入漏洞基本原理 在常见的web漏洞中,SQL注入漏洞较为常见,危害也较大.攻击者一旦利用系统中存在的SQL注入漏洞来发起攻击,在条件允许的情况下,不仅可以获取整站数据,还可通过进一步的渗透 ...
- break、continue、return的使用
跳转控制语句: java中的goto是保留字,目前不能使用,虽然没有了goto语句可以增强程序的安全性,但是也带来很多不便. 比如说:我们想让某个循环到某一步的时候就结束,现在就做不了这个事情了.为了 ...
- 获取第几个class
假如类名为a,如果是同级(兄弟元素)的,如:<ul><li class='a'></li><li class='a'></li></u ...
- Android使用命令行操作数据库
所有的应用程序本地文件都存放在/data/data/目录下 C:\Users\nicole>adb shell * daemon not running. starting it now on ...
- Qt android 配置
http://www.cnblogs.com/ztzheng/p/3703716.html
- 大数据笔记(十三)——常见的NoSQL数据库之HBase数据库(A)
一.HBase的表结构和体系结构 1.HBase的表结构 把所有的数据存到一张表中.通过牺牲表空间,换取良好的性能. HBase的列以列族的形式存在.每一个列族包括若干列 2.HBase的体系结构 主 ...