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){
// 每次數(shù)據(jù)加載完褐缠，必須重置
me.resetload();
}
} else{
if(me&&me.lock){
if(!$("#couponList").html()){
var interError=doT.template($("#errorCourseList").html());
var html=interError();
$("#couponList").append(html);
}
//鎖定
me.lock();
//顯示無數(shù)據(jù)
me.noData();
// 每次數(shù)據(jù)加載完政鼠，必須重置
me.resetload();
}
}
},"json")
}
加載刷新的代碼：
//頁(yè)面拖拽加載數(shù)據(jù)（插件：dropload)
var dropload = $("#couponList").dropload({
scrollArea:window,
// 1 . 下拉刷新 回調(diào)函數(shù) （看結(jié)構(gòu)）
loadUpFn : function(me){
$.ajax({
type: 'GET',
// 每次獲取最新的數(shù)據(jù)即可
url: './interface/page.php?pageNo=1',
dataType: 'json',
success: function(data){
// $.ajax()雖接口提供json字符串，但接收到的是 json對(duì)象
var result = '';
// 循環(huán)拼接顯示內(nèi)容DOM
// 刷新獲取多少數(shù)據(jù)队魏，顯示多少 使用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>';
}
// 為測(cè)試公般，延遲1秒加載
setTimeout(function(){
// 插入加載使用 html() 重置 DOM
$('.lists').html(result);
// 每次數(shù)據(jù)加載完，必須重置
me.resetload();
},1000);
},
// 加載出錯(cuò)
error: function(xhr, type){
alert('Ajax error!');
// 即使加載出錯(cuò)胡桨，也得重置
me.resetload();
}
});
},
//上拉加載更多 回調(diào)函數(shù)
loadDownFn : function(me){
getCoupon(status,pageNo++,PAGE_SIZE,me);
},
以上不寫默認(rèn)為如下官帘，自定義文本內(nèi)容加上以下
// 下拉刷新模塊顯示內(nèi)容
domUp : {
domClass : 'dropload-up',
// 下拉過程顯示內(nèi)容
domRefresh : '<div class="dropload-refresh">↓下拉過程顯示內(nèi)容-下拉刷新-自定義內(nèi)容</div>',
// 下拉到一定程度顯示提示內(nèi)容
domUpdate : '<div class="dropload-update">↑釋放更新-自定義內(nèi)容</div>',
// 釋放后顯示內(nèi)容
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中-自定義內(nèi)容...</div>'
},
// 上拉加載更多
domDown:{
domClass : 'dropload-down',
//滑動(dòng)到底部顯示內(nèi)容
domRefresh : '<div class="dropload-refresh">↑上拉加載更多</div>',
//內(nèi)容加載過程中顯示內(nèi)容
domLoad : '<div class="dropload-load"><span class="loading"></span>加載中...</div>',
// 沒有更多內(nèi)容
domNoData : '<div class="dropload-noData">暫無數(shù)據(jù)</div>'
}
});
2017.1.17補(bǔ)充
上述代碼存在一個(gè)問題，就是請(qǐng)求接口多一次的問題昧谊，因?yàn)橹挥姓?qǐng)求了才知道有沒有下一頁(yè)刽虹。
解決：
根據(jù)接口提供的pages字段判斷共多少頁(yè)，若是大于pages就不再去請(qǐng)求
代碼：
Paste_Image.png
