php下拉刷新加载,dropload.js插件下拉刷新和上拉加载使用详解

',domLoad : '

加载中...',domNoData : '

'

},loadUpFn : function(me){

//下拉刷新需要调用的函数

alert("下拉刷新需要调用的函数");

//重置下拉刷新

me.resetload();

},loadDownFn : function(me){

//上拉加载更多需要调用的函数

alert("上拉加载更多需要调用的函数");

//定时器函数,为了看出上拉加载更多效果

setTimeout(function(){

// 每次数据加载完，必须重置

me.resetload();

},1000);

}

});

一些完整的例子 按需查看就好

示例一、加载底部

$(function(){

// 页数

var page = 0;

// 每页展示5个

var size = 5;

// dropload调用

$('.content').dropload({

scrollArea : window,loadDownFn : function(me){

page++;

// 拼接HTML

var result = '';

$.ajax({

type: 'GET',url: 'http://ons.me/tools/dropload/json.php?page='+page+'&size='+size,//配合后台接口

dataType: 'json',success: function(data){

var arrLen = data.length;

if(arrLen > 0){

for(var i=0; i

result += ''

+''

+'

'+data[i].title+''

+''+data[i].date+''

+'';

}

// 如果没有数据

}else{

// 锁定

me.lock();

// 无数据

me.noData();

}

// 为了测试，延迟1秒加载

setTimeout(function(){

// 插入数据到页面，放到最后面

$('.lists').append(result);

// 每次数据插入，必须重置

me.resetload();

},1000);

},error: function(xhr,type){

alert('Ajax error!');

// 即使加载出错，也得重置

me.resetload();

}

});

}

});

});

示例二、加载顶部、底部

$(function(){

// 页数

var page = 0;

// 每页展示10个

var size = 10;

// dropload

$('.content').dropload({

scrollArea : window,domUp : {

domClass : 'dropload-up',domRefresh : '

↓下拉刷新-自定义内容',domUpdate : '

↑释放更新-自定义内容