移动端ajax分页,移动端分页加载 - 花乐天的个人空间 - OSCHINA

分页加载有底部loading和滚动体两部分组成

1.何时有loading?

当前数组的长度

2.如何判断滚动加载

if(ele.clientHeight+ele.scrolltop>ele.scrollHeight-50){

距离底部50触发

}

if (getScrollTop() + getWindowHeight() == getScrollHeight() && that.flag == false) { //此时滚动条已经下拉到底部了

that.flag = true

if (that.mLabelList.length

that.getData(

原数组拼接回来的数据

that.falg=false

)

}

如何手动防抖:设定一个值为flag ,flag 为false 时才能为进入滚动,之后设为true,在完成ajax之后变为false ,成为下一轮滚动

export function getScrollTop() {

var scrollTop = 0,

bodyScrollTop = 0,

documentScrollTop = 0;

if (document.body) {

bodyScrollTop = document.body.scrollTop;

}

if (document.documentElement) {

documentScrollTop = document.documentElement.scrollTop;

}

scrollTop = (bodyScrollTop - documentScrollTop > 0) ? bodyScrollTop : documentScrollTop;

return scrollTop;

}

//文档的总高度

export function getScrollHeight() {

var scrollHeight = 0,

bodyScrollHeight = 0,

documentScrollHeight = 0;

if (document.body) {

bodyScrollHeight = document.body.scrollHeight;

}

if (document.documentElement) {

documentScrollHeight = document.documentElement.scrollHeight;

}

scrollHeight = (bodyScrollHeight - documentScrollHeight > 0) ? bodyScrollHeight : documentScrollHeight;

return scrollHeight;

}

//浏览器视口的高度

export function getWindowHeight() {

var windowHeight = 0;

if (document.compatMode == "CSS1Compat") {

windowHeight = document.documentElement.clientHeight;

} else {

windowHeight = document.body.clientHeight;

}

return windowHeight;

}

移动端ajax分页,移动端分页加载 - 花乐天的个人空间 - OSCHINA - 中文开源技术交流社区...相关推荐

java 滚动加载_滚动加载 - java-苦苦甜甜的个人空间 - OSCHINA - 中文开源技术交流社区...
html代码如下: 滚动条距离底部 #parse("front/common/include.html") $(function () { var i = 4; $(window) ...
java版如何使区块常加载,Java类加载机制 - suer27zhu的个人空间 - OSCHINA - 中文开源技术交流社区...
首先上图如图所示,Java类加载机制的六个阶段 Java代码编译完成后会生成对应的class文件,接着我们运行java命令的时候,其实是启动了JVM虚拟机执行class字节码文件的内容.大致分为六个 ...
静态html的ajax如何发请求,静态页面ajax - 冥焱的个人空间 - OSCHINA - 中文开源技术交流社区...
1.静态页面 $.ajax({ type:"get", url:"http://localhost:8080/app/register/sendSMS",//请 ...
html怎么加断点快捷键,HTML添加断点 - osc_vyztkm1b的个人空间 - OSCHINA - 中文开源技术交流社区...
###1.前言很多时候,页面的dom元素是动态添加的,而我们不知道具体是哪段js代码在操作这个dom元素,所以需要进行断点,对相应的dom元素进行断点监听,这样才能找出相关的js代码. 在浏览器的调 ...
在C语言中数据耦合例子,耦合性内聚加实例 - osc_yip56055的个人空间 - OSCHINA - 中文开源技术交流社区...
基本信息耦合性(或称"耦合度") 英文 : coupling 耦合性也叫块间联系.指软件系统结构中各模块间相互联系紧密程度的一种度量.模块之间联系越紧密,其耦合性就越强,模块之间 ...
java加壳工具_加壳工具 - virbox加密空间站 - OSCHINA - 中文开源技术交流社区
Virbox Protector Standalone 加壳工具可直接对dll文件进行加壳,防止代码反编译,更安全,更方便. 产品简介 Virbox Protector Standalone提供了强大 ...
java中加载窗口的函数_Java函数调用 - playgame的个人页面 - OSCHINA - 中文开源技术交流社区...
Java函数调用和存储过程一样步骤如下: 1. 编写自定义的函数,或调用系统函数,为简单起见,我调用Mysql CONCAT()函数. 2.编写java调用测试类,可以是main方法,也可以JUnit ...
Jquery前端分页插件pagination同步加载和异步加载
上一篇文章介绍了Jquery前端分页插件pagination的基本使用方法和使用案例,大致原理就是一次性加载所有的数据再分页.https://www.jianshu.com/p/a1b8b1db025 ...
今天突然发现，微信小程序手机访问正常，PC端访问小程序图片无法加载？
今天突然发现,微信小程序手机访问正常,PC端访问小程序图片无法加载? 所有图片在pc上查看都无法显示. 然后使用抓包工具抓包,pc端图片全部403,结果为 AccessDenied You are d ...

移动端ajax分页,移动端分页加载 - 花乐天的个人空间 - OSCHINA - 中文开源技术交流社区...

移动端ajax分页,移动端分页加载 - 花乐天的个人空间 - OSCHINA - 中文开源技术交流社区...相关推荐

最新文章

热门文章