你的位置:首页 > Java教程

[Java教程]集成iscroll 下拉加载更多 jquery插件


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

一、插件主功能:

1、下拉加载

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


二、插件集成组件:

iscroll,imgLoad

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


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


四、插件API

1、配置

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

View Code

2、对外接口

 1 //重新设置ajax请求参数,包括url等 2 $.fn.setParam = function(values) { 3   if (this[0] && this[0].t) { 4     return this[0].t.setParam(values); 5   } 6   return null; 7 }; 8 //刷新scroll列表,内容有变的情况下,需要刷新列表,具体看参详iscroll 9 $.fn.refresh = function() {10   if (this[0] && this[0].t) {11     return this[0].t.refresh();12   }13   return null;14 };15 //重新设置列表外围容器的高度16 $.fn.reSetHeight = function(height) {17   if (this[0] && this[0].t) {18     return this[0].t.reSetHeight(height);19   }20   return null;21 };22 //滚动到列表内,某个元素内,具体参详iscroll23 $.fn.scrollToElement = function(el, time, offsetX, offsetY, easing) {24   if (this[0] && this[0].t) {25     return this[0].t.scrollToElement(el, time, offsetX, offsetY, easing);26   }27   return null;28 }

View Code

 


五、实例讲解

 1、目录结构

2、各个文件关键点

 

 


六、遇到的问题

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

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

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

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

更改代码:

1 var u = navigator.userAgent, app = navigator.appVersion;2       var flag = !((!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/))||(u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) || (u.indexOf('iPad') > -1))3       4       if(flag){5         this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' + this.translateZ;6       }else{7         this.scrollerStyle[utils.style.transform] = 'translate(' + x + 'px,' + y + 'px)' ;8       }

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