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

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

一、插件主功能：

1、下拉加载

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

二、插件集成组件：

iscroll,imgLoad

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

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

四、插件API

1、配置

 {
     url: null, //列表的链接地址
     ajaxOps: { //链接请求的ajax配置
         type: "get",
         data: {},
         dataType: "json",
         async: true
     },
     callback: function() {}, //请求完成之后的回调函数，可在此函数中追加列表
     curAjaxId: null, //tab页面切换时，保证当前容器在同一时间内，只存在一个请求
     loadType: "load", //默认滚动到底部自动加载，值有："uplaod"下拉加载，"download"上拉加载
     isShowEmpty: true, //没有列表记录时，是否显示空记录页面。为false时，没有数据记录则显示没有更多
     offsetHeight: 0 //页面高度减去此参数，就是列表容器的高度
 };    

2、对外接口

 //重新设置ajax请求参数，包括url等
 $.fn.setParam = function(values) {
     if (this[0] && this[0].t) {
         return this[0].t.setParam(values);
     }
     return null;
 };
 //刷新scroll列表，内容有变的情况下，需要刷新列表，具体看参详iscroll
 $.fn.refresh = function() {
     if (this[0] && this[0].t) {
         return this[0].t.refresh();
     }
     return null;
 };
 //重新设置列表外围容器的高度
 $.fn.reSetHeight = function(height) {
     if (this[0] && this[0].t) {
         return this[0].t.reSetHeight(height);
     }
     return null;
 };
 //滚动到列表内，某个元素内,具体参详iscroll
 $.fn.scrollToElement = function(el, time, offsetX, offsetY, easing) {
     if (this[0] && this[0].t) {
         return this[0].t.scrollToElement(el, time, offsetX, offsetY, easing);
     }
     return null;
 }

五、实例讲解

1、目录结构

2、各个文件关键点

六、遇到的问题

在写此插件遇到最多的问题就是iscroll.js埋下的各种坑。关于这些坑的解决，网上已经有不少文章，这里就不赘述。在此分享一篇比较好的文章：【IScroll深入学习】解决IScroll疑难杂症

但是自ios9升级以来，在苹果下回出现新的问题。当iscroll正在滚动时，如果再去触摸屏幕会出现空白一闪。

解决此问题的方案是：在ios下不使用3D效果，直接改成2D效果。

更改源码位置在_translate()方法之中，位于代码836行。

更改代码：

 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)' ;
             }

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