//引入js,所需要的js已经上传到个人资源
<script type="text/javascript" src="/web/home/js/template-web.js"></script>
<link href="/web/home/css/dropload.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="/web/home/js/dropload.min.js"></script>
<script type="text/javascript" src="/web/home/js/basic.js"></script>
<div class="tit_zj">中奖记录<span>(仅显示7天记录)</span></div>
<div class="wrap_p">
</div>
<div class="zj_list">
<ul>
</ul>
<div class="clear"></div>
</div>
</div>
</div>
<form id="queryForm">
<input type="hidden" name="pageNumber" value="1"> //当前页
<input type="hidden" name="pageSize" value="20"> //每页显示数量
</form>
</body>
<script id="jsUserListTempl" type="text/html">
{{each data.list jsUser i}}
<li>
<div class="t_R"> <span class="tel">{{jsUser.Tel}}</span> <span class="u_name">{{jsUser.WinName}}</span> </div>
<div class="t_L">
<span class="date">{{jsUser.WinTime }}</span>
<span class="txt">
<span class="j_name">{{jsUser.GoodsName}}</span>
{{if jsUser.Status==1}}
<span class="tip_gray">已兑奖</span>
{{else}}
<span class="tip_org">未兑奖</span>
{{/if}}
</span>
</div>
</li>
{{/each}}
</script>
<script type="text/javascript" >
$(function(){
var $queryForm = $('#queryForm');
var $pageNumber = $queryForm.find('input[name="pageNumber"]');
$pageNumber.val(1);
var $jsuser_list_wrap_lists=$('.zj_list ul');
var dropload = $('.shzx_box').dropload({
scrollArea : window,
domUp : {
domClass : 'dropload-up',
domRefresh : '<div class="dropload-refresh">↓下拉刷新</div>',
domUpdate : '<div class="dropload-update">↑释放更新</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">没有更多</div>'
},
domDown : {
domClass : 'dropload-down',
domRefresh : '<div class="dropload-refresh">↑上拉加载更多</div>',
domLoad : '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
domNoData : '<div class="dropload-noData">没有更多</div>'
},//下拉刷新
loadUpFn : function(me){
$pageNumber.val(1);
$.getApi("/web/home/getlotterydata",$queryForm.serialize(), function(result){
console.log(result);
if(result.code !== 1){
$.alert(result.message, "提示");
// 每次数据加载完,必须重置
me.resetload();
return;
}
if(result.data.totalRow==0){
//显示无数据
me.noData();
me.resetload();
return;
}else{
me.noData(false);
}
$jsuser_list_wrap_lists.html(template('jsUserListTempl',result));
// 每次数据加载完,必须重置
me.resetload();
me.unlock();
if(result.data.list.length == 0){
me.noData();
} else {
me.noData(false);
$pageNumber.val(parseInt($pageNumber.val())+1);
}
$.initLazyLoad();
}, "json");
},
loadDownFn : function(me){
$.getApi("/web/home/getlotterydata",$queryForm.serialize(),function(result){
//console.log(result);
if(result.code !== 1){
window.alert(result.message, "提示");
me.noData();
// 每次数据加载完,必须重置
me.resetload();
return ;
}
if(result.data.totalRow==0){
me.noData();
me.resetload();
return;
}else{
me.noData(false);
}
$jsuser_list_wrap_lists.append(template('jsUserListTempl',result));
if(result.data.pageNumber >= result.data.totalPage){
me.lock();
me.noData();
}
// 每次数据加载完,必须重置
me.resetload();
$pageNumber.val(parseInt($pageNumber.val())+1);
$.initLazyLoad();
}, "json");
},
threshold : 50
});
});
</script>
请求数据如下
效果如下