监听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=" ...
随机推荐
- UITableView和MJReFresh结合使用问题记录
1. 代码主动调用下拉刷新, [self.tableView.mj_header beginRefreshing]; 调用会走: [MJRefreshNormalHeader headerWithRe ...
- Android 如何生成jks签名文件
- Codeforces 864E - Fire(dp)
原题连接:http://codeforces.com/problemset/problem/864/E 题意:一个人想从大火中带走一些东西.每次他只能带一个,耗时ti ,价值为pi, 当总时间超过di ...
- codevs 2038 香甜的黄油x+luogu P1828 x
题目描述 Description 农夫John发现做出全威斯康辛州最甜的黄油的方法:糖.把糖放在一片牧场上,他知道N(1<=N<=500)只奶牛会过来舔它,这样就能做出能卖好价钱的超甜黄油 ...
- Ubuntu redis 实战 持久化策略 主从复制 以及 故障恢复
推荐文章 redis数据结构学习 redis持久化 redis主从复制 redis哨兵
- 特征提取算法(4)——LoG特征提取算法
目录 1.介绍 2.LoG原理 3.数学原理 4.模板性质 1.介绍 LoG(DoG是一阶边缘提取)是二阶拉普拉斯-高斯边缘提取算法,先高斯滤波然后拉普拉斯边缘提取. Laplace算子对通过图像进行 ...
- JSP 自动刷新
JSP 自动刷新 想象一下,如果要直播比赛的比分,或股票市场的实时状态,或当前的外汇配给,该怎么实现呢?显然,要实现这种实时功能,您就不得不规律性地刷新页面.JSP提供了一种机制来使这种工作变得简单, ...
- 大牛整理最全Python零基础入门学习资料
大牛整理最全Python零基础入门学习资料 发布时间:『 2017-11-12 11:56 』 帖子类别:『人工智能』 阅读次数:3504 (本文『大牛整理最全Python零基础入门学习资料 ...
- apache cgi 程序: End of script output before headers
测试linux Apache cgi程序: #include <stdio.h> int main(){ printf("abc"); ; } 目录:/var/www/ ...
- Apache2.4常用编译参数
转载文章,亲试 Apache2.4以后的版本编译依赖apr,所以,编译之前需要先安装apr及apr-util. 编译参数只是一个参考作用,这个参数是我平常使用的,具体工作中的需求还是要区别对待的 一些 ...