<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width" />
<title>我的评价</title>
<link rel="stylesheet" href="css/rate.css">
<script src="js/jquery-2.1.4.min.js"></script>
<link rel="stylesheet" href="toast/toast.css">
<script src="toast/toast.js"></script>
<script src="js/jquery.history.js"></script>
</head>
<body>
<div style="height:48px;"></div>
<ul class="tabul">
<li><a href="javascript:void(0);" data="0">全部 (${count_all.result})</a></li>
<li><a href="javascript:void(0);" data="3">好评 (${count_3.result})</a></li>
<li><a href="javascript:void(0);" data="2">中评 (${count_2.result})</a></li>
<li><a href="javascript:void(0);" data="1">差评 (${count_1.result})</a></li>
</ul>
<ul class="ratelist">
<!-- li> <img src="" class="himg" alt="" />
<h2>爱美的小女孩<span class="icon-pj cp"><i></i>差评</span></h2>
<div class="note"> 最近二十年是我国地方博物馆事业发展的黄金时间,很多具有地域性的博物馆建筑已经承担起收藏功能。 </div>
<dl class="pics">
<dd><img src="" alt="" /></dd>
<dd><img src="" alt="" /></dd>
<dd><img src="" alt="" /></dd>
<dd><img src="" alt="" /></dd>
<dd><img src="" alt="" /></dd>
</dl>
<p class="p1">颜色分类:魔力红 尺码:M<span>2016/09/12 9:23</span></p>
</li--->
</ul>
<div id="bottomTxt" style="text-align:center;padding:12px 0; color:#999;">正在加载中...</div>
<script>
var bottomTxt,page = 0,loading = false,isFinish = false;
var rank = '${param.rank}';
var data = { page:page,pageSize:10,rank:rank};
var productId ='${param.productId}';
$(function() {
bottomTxt = $("#bottomTxt");
$(window).scroll(checkScroll);//监听滚动
loadPageList(); //加载第一页产品
if(rank==0){$(".tabul li:eq(0) a").addClass("on");}
if(rank==3){$(".tabul li:eq(1) a").addClass("on");}
if(rank==2){$(".tabul li:eq(2) a").addClass("on");}
if(rank==1){$(".tabul li:eq(3) a").addClass("on");}
$(".tabul li").click(function(){
$(".tabul li a").removeClass("on");
$(this).find("a").addClass("on");
rank = $(this).find("a").attr("data");
if(rank=="0"){rank="";}
data['rank'] = rank;
replaceUrl();
loadPageList();
})
})
//滚动监听
function checkScroll() {
var srollPos = $(window).scrollTop(); //滚动条距离顶部的高度
var windowHeight = $(window).height(); //窗口的高度
var dbHiht = $("body").height(); //整个页面文件的高度
if ((windowHeight + srollPos) >= (dbHiht) && !loading && !isFinish) {
loading = true;
setTimeout(function() {
loadPageList();
},300);
}
}
//改变URL地址
function replaceUrl() {
var currentState = history.state;
var stateObj = { foo: "bar" };
if(rank=="0"){rank="";}
window.history.pushState(stateObj,"","list?productId="+productId+"&rank="+rank);
}
//动态加载
function loadPageList() {
$(".ratelist li").remove();
toast.loading();
var result;
data = data;
$.ajax({
url : "comment/list",type : "post",data : data,async: false,success : function(data) {
var data = JSON.parse(data);
if (data.error_code != 0) {
toast.result(data.error_message);
return;
}
result = data.result;
toast.remove();
console.log();
},error : function(err) {
toast.result("网络异常");
loading = false;
}
})
if(result){
//判断是否结束
if(result.length < 10){
isFinish = true;
bottomTxt.text("没有更多记录了...");
}
$.each(result,function(index,items){
var n = items.rank;
var a;
if(n==3){ a = '<span class="icon-pj hp"><i></i>好评</span>'; }
if(n==2){ a = '<span class="icon-pj zp"><i></i>中评</span>'; }
if(n==1){ a = '<span class="icon-pj cp"><i></i>差评</span>'; }
var temp ='<li><img src="'+items.headUrl+'" class="himg" alt="" />'+
'<h2><b>'+items.nickName+'</b>'+a+'</h2>'+
'<div class="note">'+items.commentItem[0].comment+'</div>'+
'<p class="p1">颜色分类:'+items.color+' 尺码:'+items.size+'<span>'+items.commentItem[0].createTime.substr(0,16)+'</span></p>'+
'</li>';
$(".ratelist").append(temp);
});
loading = false;
page++;
}
}
</script>
</body>
</html>
原文链接:https://www.f2er.com/ajax/161738.html