移动端H5-dropload.js请求后端接口进行分页加载数据
js插件下载地址：https://download.csdn.net/download/qq_36993916/15119490
注意：php接口也要写好分页
<link rel="stylesheet" href="./plugs/dropload/dist/dropload.css">
<script src="./plugs/dropload/dist/dropload.min.js"></script><!-- 动态评论 -->
<div class="comment-list" style="display: block;">
<h3>评论</h3>
<div class="comment-info-list" id="list">
</div>
<!-- 无评论时显示 -->
<div class="no-comment" style="display:none;">
<div class="no-comment-anm">
<img src="./images/no_comment.png" alt="">
</div>
<div class="no-comment-app ">
<h5><span class="open-download-block">下载App参与互动吧</span></h5>
</div>
</div>
<div style="height: 25px;"></div>
</div>
//分页加载数据 dropload
$(function(){
// 页数
var page = 0;
// 每页展示3个
var size = 3;
var next_index = 0;//下一页索引值php接口用用
// dropload
$('.container').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>'
},
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){
$.ajax({
headers: {
'version': "wap",
},
data:{
'tid': <?= $res['id'];?>,//801 358 811
'type': 2,//动态
'category' : 1, //拿最热数据
'page_size':size,
'next_index':next_index
},
type: 'GET',
url: JsApi+'/api/comment/list',
dataType: 'json',
async: false,//同步请求防止数据错乱
success: function(data){
var returnData = data.data.list;
// console.log(next_index,data);
var para = ''; //置空不然会被多追加数据
for(var i = 0; returnData.length >i;i++){
//创建时间
var date = new Date(parseInt(returnData[i].create_time)*1000);
var createtime = date.getMonth()+1+'-'+date.getDate()+' '+date.getHours()+":"+ date.getMinutes();
//是否精彩评论显示
var isperfect = (returnData[i].is_perfect==2)?"none":"block";
//是否点赞显示
var ispraise = (returnData[i].is_praise==2)?"":"_selection";
// console.log(returnData[i]);
//处理评论详情
var retdata = deal_comment_info(returnData[i]);
//判断子评论是否显示
var ischid = (returnData[i].child_list.length>0)?"block":"none";
if (parseInt(returnData[i].messagenums)<=0){
returnData[i].messagenums='';
}
if (parseInt(returnData[i].praisenums)<=0){
returnData[i].praisenums='';
}
para += '<div class="comment-info">\n' +
' <div class="comment-info-user">\n' +
' <div class="comment-info-header">\n' +
' <a href="javascript:void(0)" class="comment-info-user-header open-download-block">\n' +
' <img src="'+returnData[i].member.headurl+'" onerror="javascript:this.src= \'./images/logo_lu.png\'">\n' +
' </a>\n' +
' </div>\n' +
' <div class="comment-info-name">\n' +
' <div class="comment-text-box">\n' +
' <a href="javascript:void(0)" class="router-link-active open-download-block">\n' +
' <h3 class="comment-text-name">\n'
+ returnData[i].member.nickname +
' </h3>\n' +
' </a>\n' +
' <h4 class="comment-text-time">\n' +
' <a href="javascript:void(0)" class="open-download-block"><span class="from-time">'+createtime+'</span></a>\n' +
' </h4>\n' +
' </div>\n' +
' </div>\n' +
' <img src="../images/label_hot_reviews.png" alt="" class="comment-text-wond" style="display: '+isperfect+';">\n' +
' </div>\n' +
' <div class="comment-detail">\n' +
' <div class="comment-detail-par">\n' +
' <div class="open-download-block">\n' +
' <span>'+retdata.parinfo+'</span>\n' +
' </div>\n' +
' </div>\n' +
' <div class="comment-detail-child" style="display: '+ischid+';">\n' +
' <div class="child-info-list" style="display: '+ischid+';">\n'
+retdata.chidhtml+
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="f-footer-ctrl">\n' +
' <a href="javascript:void(0)" class="m-diy-btn m-box-center-a open-download-block">\n' +
' <img src="../images/iocn_16_comment.png" alt="" class="lite-iconf lite-iconf-comments">\n' +
' <h4>'+returnData[i].messagenums+'</h4>\n' +
' </a>\n' +
' <a href="javascript:void(0)" class="m-diy-btn m-box-center-a open-download-block">\n' +
' <img src="../images/iocn_16_like'+ispraise+'.png" alt="" class="lite-iconf lite-iconf-like asopen-download-block">\n' +
' <h4>'+returnData[i].praisenums+'</h4>\n' +
' </a>\n' +
' </div>\n' +
' </div>';
}
$('#list').append(para);
next_index = data.data.next_index;
// 每次数据加载完，必须重置
me.resetload();
// 重置页数，重新获取loadDownFn的数据
page = 0;
// 解锁loadDownFn里锁定的情况
me.unlock();
me.noData(false);
// 为了测试，延迟1秒加载-延迟会出多加载一次
// setTimeout(function(){
// $('#list').append(para);
// next_index = data.data.next_index;
// // 每次数据加载完，必须重置
// me.resetload();
// // 重置页数，重新获取loadDownFn的数据
// page = 0;
// // 解锁loadDownFn里锁定的情况
// me.unlock();
// me.noData(false);
// },1000);
},
error: function(xhr, type){
console.log('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
loadDownFn : function(me){
page++;
// 拼接HTML
var para = '';
$.ajax({
headers: {
'version': "wap",
},
data:{
'tid': <?= $res['id'];?>,//801 358 811
'type': 2,
'category' : 1, //拿最热数据
'page_size':size,
'next_index':next_index
},
type: 'GET',
url: JsApi+'/api/comment/list',
dataType: 'json',
async: false,
success: function(data){
if (parseInt(page)==1 && data.data.list.length==0) { //无评论时显示
$('.no-comment').css('display','block');
var h = $(document).height();//页面总高度
var h1 = $(window).height(); //页面显示区域高度
if(h<=h1){ //页面小于一屏
$(".no-comment").height(605);
}
}
var returnData = data.data.list;
console.log(data);
if(returnData.length > 0){
for(var i = 0; i<returnData.length;i++){
//创建时间
var date = new Date(parseInt(returnData[i].create_time)*1000);
var createtime = date.getMonth()+1+'-'+date.getDate()+' '+date.getHours()+":"+ date.getMinutes();
//是否精彩评论显示
var isperfect = (returnData[i].is_perfect==2)?"none":"block";
//是否点赞显示
var ispraise = (returnData[i].is_praise==2)?"":"_selection";
// console.log(returnData[i]);
//处理评论详情
var retdata = deal_comment_info(returnData[i]);
//判断子评论是否显示
var ischid = (returnData[i].child_list.length>0)?"block":"none";
if (parseInt(returnData[i].messagenums)<=0){
returnData[i].messagenums='';
}
if (parseInt(returnData[i].praisenums)<=0){
returnData[i].praisenums='';
}
para += '<div class="comment-info">\n' +
' <div class="comment-info-user">\n' +
' <div class="comment-info-header">\n' +
' <a href="javascript:void(0)" class="comment-info-user-header open-download-block">\n' +
' <img src="'+returnData[i].member.headurl+'" onerror="javascript:this.src= \'./images/logo_lu.png\'">\n' +
' </a>\n' +
' </div>\n' +
' <div class="comment-info-name">\n' +
' <div class="comment-text-box">\n' +
' <a href="javascript:void(0)" class="router-link-active open-download-block">\n' +
' <h3 class="comment-text-name">\n'
+ returnData[i].member.nickname +
' </h3>\n' +
' </a>\n' +
' <h4 class="comment-text-time">\n' +
' <a href="javascript:void(0)" class="open-download-block"><span class="from-time">'+createtime+'</span></a>\n' +
' </h4>\n' +
' </div>\n' +
' </div>\n' +
' <img src="../images/label_hot_reviews.png" alt="" class="comment-text-wond" style="display: '+isperfect+';">\n' +
' </div>\n' +
' <div class="comment-detail">\n' +
' <div class="comment-detail-par">\n' +
' <div class="open-download-block">\n' +
' <span>'+retdata.parinfo+'</span>\n' +
' </div>\n' +
' </div>\n' +
' <div class="comment-detail-child" style="display: '+ischid+';">\n' +
' <div class="child-info-list" style="display: '+ischid+';">\n'
+retdata.chidhtml+
' </div>\n' +
' </div>\n' +
' </div>\n' +
' <div class="f-footer-ctrl">\n' +
' <a href="javascript:void(0)" class="m-diy-btn m-box-center-a open-download-block">\n' +
' <img src="../images/iocn_16_comment.png" alt="" class="lite-iconf lite-iconf-comments">\n' +
' <h4>'+returnData[i].messagenums+'</h4>\n' +
' </a>\n' +
' <a href="javascript:void(0)" class="m-diy-btn m-box-center-a open-download-block">\n' +
' <img src="../images/iocn_16_like'+ispraise+'.png" alt="" class="lite-iconf lite-iconf-like asopen-download-block">\n' +
' <h4>'+returnData[i].praisenums+'</h4>\n' +
' </a>\n' +
' </div>\n' +
' </div>';
}
// 如果没有数据
}else{
// 锁定
me.lock();
// 无数据
me.noData();
}
// 插入数据到页面，放到最后面
$('#list').append(para);
next_index = data.data.next_index;
// 每次数据插入，必须重
me.resetload();
// 为了测试，延迟1秒加载-延迟会多加载一次
// setTimeout(function(){
// // 插入数据到页面，放到最后面
// $('#list').append(para1);
// next_index = data.data.next_index;
// // 每次数据插入，必须重置
// me.resetload();
// },1000);
},
error: function(xhr, type){
console.log('Ajax error!');
// 即使加载出错，也得重置
me.resetload();
}
});
},
threshold : 50
});
});
//分页append事件之后，内容属于动态原有事件失效，此方法可重新绑定事件
$(document).on("click", ".open-download-block", function() {
$('.download-open').css('display','block');
});
192
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
