监听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=" ...
随机推荐
- 前端node面试题之---对比JS和NodeJS的区别
区别: 1.JS运行在浏览器端,用于用户的交互效果,NodeJS运行在服务器端,用于服务器的操作,例如,Web服务器创建,数据库的操作,文件的操作等 2.JS运行在浏览器端,存在多个JS解释器,存在兼 ...
- HTML Tag, 把 WCAG 的标准和语义网的目标进行代码上的体现
1. 文档声明:<!Doctype> 其实这跟 WCAG 根本上连不上什么直接关系,但为了一个兼容性更好,特别是向后兼容的页面,我推荐你这样写: <!Doctype html> ...
- SQL—事物
[选择题]以下哪个选项是DBMS的基本单位,是构成单一逻辑工作单元的操作集合. A.进程 B.SQL C.事务 D.文件 分析: (1)一个事务包含一个或多个SQL语句,是逻辑管理的工作单元(原子单元 ...
- DOS命令里面的EQ、NE、GT、LT、GE、LE分别是什么意思
EQ 就是 EQUAL等于NQ 就是 NOT EQUAL不等于 GT 就是 GREATER THAN大于 LT 就是 LESS THAN小于 GE 就是 GREATER THAN OR EQUAL 大 ...
- R 画散点图
ggplot(data=df, aes(x=n, y=rt, group=kernel, shape=kernel, colour=kernel)) + geom_point(fill="w ...
- SQL GROUP BY两个列
首先group by 的简单说明: group by 一般和聚合函数一起使用才有意义,比如 count sum avg等,使用group by的两个要素: (1) 出现在select后面的字段 要 ...
- 前端进阶系列(二):css常见布局解决方案
水平居中布局 margin+定宽 <div class="parent"> <div class="child">Demo</di ...
- fedora18 [linux]Error: failure: repodata/repomd.xml from fedora: [Errno 256] No more mirrors to try.
在使用fedora17 系统的yum源的时候出现了如下错误: Error: failure: repodata/repomd.xml from fedora: [Errno 256] No more ...
- code_action
w https://raw.githubusercontent.com/laravel/laravel/master/config/database.php <?php return [ /* ...
- Django学习之数据库与ORM
二.ORM表模型 表(模型)的创建: 1.ORM之增(create.save) 一对多(ForeignKey): 多对多(ManyToManyField()): 2.ORM之删(delete) 3.O ...