你的位置:首页 > Java教程

[Java教程]集成iscroll 分页加载更多


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

一、插件主功能:

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

 


下班回家,待续。。。。

项目实例地址

https://github.com/kaisela/myjobs/tree/master/requirejs/iscrollLoading