1、引入 dropload.js,dropload.css
<link rel="stylesheet" href="/static/css/dropload.css">
<script src="/static/js/jquery-1.11.2.min.js"></script>
<script src="/static/js/dropload.js"></script>
2.在js 中调用
<div id="dataDiv">
<ul id="dataShow">
</ul>
</div>
//定义初始页码
var pageNumber = 1;
//是否有更多数据表示
var down = null;
$(function () {
//先清空要填充的元素块
$("#dataShow").empty();
//初始化自己的ajax 方法,组装元素,放到 #dataShow 中
init();
//定义dropload
$('#dataDiv').dropload({
scrollArea : window,
domDown:{
//自定义显示
domNoData:"<div class='dropload-noData'>没有更多数据了</div>"
},
//上拉加载更多
loadDownFn : function(me){
pageNumber = pageNumber +1;
init();
if(down == "no"){
me.lock('down');
me.noData();
}
me.resetload();
},
//下拉刷新
loadUpFn: function (me) {
pageNumber = 1;
$("#dataShow").empty();
init();
me.resetload();
}
});
});
function init() {
var showDiv = $("#dataShow");
$.ajax({
url: "自己的路径",
method: "get",
//必须修改为同步请求
async: false,
data: {//自己的参数},
success:function(res){
var data = res.records;
if(data.length == 0){
down = "no";
}
for (var i = 0; i < data.length; i++) {
//组装自己的数据
}
}
})
}
3、后台 controller 按照 page 分页的逻辑写就可以了
PS : 注意事项
dropload.js 中 50行 代码
autoLoad : true
改为 false,不然当页面初始数据少的时候,会一直触发请求,导致页面卡死。改成false之后,阻止了自动刷新。