集成iscroll 下拉加载更多 jquery插件

一个插件总是经过了数月的沉淀，不断的改进而成的。最初只是为了做个向下滚动，自动加载的插件。随着需求和功能的改进，才有了今天的这个稍算完整的插件。

一、插件主功能：

1、下拉加载

2、页面滚动到底部自动加载

二、插件集成组件：

iscroll,imgLoad

其中iscroll修复了在ios9.0以上，滑动时触摸屏幕会出现闪屏的情况。

三、插件适用：移动端，为解决在ios下面适用div滚动，不流畅。，移动端的滚动到底部自动加载数据。

四、插件API

1、配置

var u = navigator.userAgent, app = navigator.appVersion;
var flag = !((!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))||(u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) || (u.indexOf('iPad') > -1))

if(flag){
this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;
}else{
this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' ;
}

View Code
imgLoad.js的作用是为了解决页面中图片一部加载产生的问题，由于页面的大小发生了变化，必须调用 iscroll 的 refresh 方法，但是如果在图片加载完成之前调用refresh方法,iscroll计算出来的高度是错误的，因此只有在图片加载完成之后，在调用refresh方法。

重点讲讲配置参数中curAjaxId的来历：实际原型是这样的，在一个页面中有3个tab页签，每个tab页签请求的地址是一样的，但是在快速切换时，前一个点击的请求还没有完成就点击了第二个页签，而此时，他们所产生的数据又是append到同一个容器内，如是将会造成tab页签对应的数据乱串。解决此问题的方案有两个，一是每个页签对应自己的容器，页面初始化3个Loading。这样数据变不会出现乱串的结果，但此方法会导致页面的代码过于冗余，页面结构也相对复杂，于是就出现了curAjaxId。只要pageIndex的值为1，就会终止前面由此id发送的所有请求。这样便不会出现数据乱串的问题。

七、插件还需要扩展的地方

1、目前只支持json，对于html等没有做处理

2、由于是从自己项目中剥离出来简单重构的代码，对于ajax的错误处理没有给出

项目实例地址
https://github.com/kaisela/myjobs/tree/master/requirejs/iscrollLoading