1、引入
<link rel="stylesheet" href="/css/dropload.css" />
<script src="/js/dropload.min.js"></script>
2、html使用
<div class="hcoupon-img" id="couponList">
</div>
3、模板
<script id="couponListTemp" type="text/x-dot-template">
{{~it :v:i}}
<div class="hcoupon-list noUse1">
<div class="list-content">
<h3>￥{{=v.discountPrice}}代金券</h3>
<p>使用条件：无限制</p>
<p>有效截止日期：{{=v.getDate}}至{{=v.validityDate}}</p>
</div>
</div>
{{~}}</script>
4、js使用
var pageNo=1; var PAGE_SIZE=5; var status=1; function getData(status){ pageNo=1; getCoupon(status,pageNo,PAGE_SIZE); }
$('.hcoupon-nav li').click(function(){
$(this).addClass('active').siblings("li").removeClass('active');
})
function getCoupon(status,pageNo,pageSize,me){
status=status;
BaseTool.get("/mine/discount/list?status="+status+"&pageNo="+pageNo+"&pageSize="+PAGE_SIZE,function(e,b){
var interText=doT.template($("#couponListTemp").html());
if(b&& b.result&& b.result.list&& b.result.list.length){
for(var i=0 ;i<b.result.list.length;i++){
b.result.list[i].validityDate = b.result.list[i].validityDate.split(" ")[0];
b.result.list[i].useDate = b.result.list[i].useDate.split(" ")[0];
b.result.list[i].getDate = b.result.list[i].getDate.split(" ")[0];
}
// 加载
var html=interText(b.result.list);
$("#couponList").append(html);
if(me&&me.resetload){
// 每次数据加载完，必须重置
me.resetload();
}
} else{
if(me&&me.lock){
if(!$("#couponList").html()){
var interError=doT.template($("#errorCourseList").html());
var html=interError();
$("#couponList").append(html);
}
//锁定
me.lock();
//显示无数据
me.noData();
// 每次数据加载完，必须重置
me.resetload();
}
}
},"json")
}
加载刷新的代码：
//页面拖拽加载数据（插件：dropload)
var dropload = $("#couponList").dropload({
scrollArea:window,
// 1 . 下拉刷新 回调函数 （看结构）
loadUpFn : function(me){
$.ajax({
type: 'GET',
// 每次获取最新的数据即可
url: './interface/page.php?pageNo=1',
dataType: 'json',
success: function(data){
// $.ajax()虽接口提供json字符串，但接收到的是 json对象
var result = '';
// 循环拼接显示内容DOM
// 刷新获取多少数据，显示多少 使用html()重置 lists DOM
for(var i = 0; i < data.data.length; i++){
result += '<a class="item opacity" href="'+data.data[i].link+'">'
+'[图片上传失败...(image-e3cc7-1565666444350)]'
+'<h3>hehe</h3>'
+'<span class="date">'+data.data[i].id+'</span>'
+'</a>';
}
// 为测试，延迟1秒加载
setTimeout(function(){
// 插入加载使用 html() 重置 DOM
$('.lists').html(result);
// 每次数据加载完，必须重置
me.resetload();
},1000);
},
// 加载出错
error: function(xhr, type){
alert('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
//上拉加载更多 回调函数
loadDownFn : function(me){
getCoupon(status,pageNo++,PAGE_SIZE,me);
},
以上不写默认为如下，自定义文本内容加上以下
// 下拉刷新模块显示内容
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>'
},
// 上拉加载更多
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>'
}
});
2017.1.17补充
上述代码存在一个问题，就是请求接口多一次的问题，因为只有请求了才知道有没有下一页。
解决：
根据接口提供的pages字段判断共多少页，若是大于pages就不再去请求
代码：
Paste_Image.png
