最近在公司做了我们的pc端网站。
需求：实现网页的下拉加载页面
思路：<div>中包含list,这是一个list中包含的元素块一个一个显示。
js监听windows的滚动条，判断滚动条下拉到窗口最下方时调用js方法，js方法，先动态加载一个上边list中的元素块，然后在追加append到上边list下边。
pc端代码如下：
手机端代码如下：
<div >
<ul id="mediatorList" class="mui-table-view mui-grid-view" style="background-color: #efefea">
<c:forEach items="${mediatorList.list}" var="mediator" varStatus="status">
<li class="mui-table-view-cell mui-media mui-col-xs-3" style="height: 40%">
<a href="${path}/winxin/peopleMediation/mediatorApplyDetail?userUuid=${mediator.uuid}&useruuid=${useruuid}&source=${source}">
<c:if test="${mediator.source==1 }">
<img class="mui-media-object " style="height:30%" src="${mediator.headimgurl}">
</c:if>
<c:if test="${mediator.source==2 }">
<img class="mui-media-object " style="height:30%" src="${imgUrl }${mediator.headimgurl}">
</c:if>
</a>
<div class="mui-media-body" style="height:70%">
<div class="m-txt-box" style="height:70%;text-align:center;">
<div style="font-size: 10">
${mediator.sequenceNumber}-${mediator.realname}
</div>
<br>
<div style="width: 100%;height: 30%;">
<button class="mui-btn btn-bg border-none" style="width:80%;height:100%" id="submit" onclick="voteOn('${mediator.uuid}')">投票</button>
</div>
</div>
<p >
<img src="${path }/resource/images/vote.png" width="15" height="15" />
${mediator.vote }
<%--${mediator.createtime } </p>--%>
</div></li></c:forEach>
</ul>
</div>
js代码：
<script>
var pullRefreshss = true;
$(window).scroll(
function () {
/*当前滚动条到顶部的距离*/
var top = $(document).scrollTop();
/*当前浏览器的可是高度*/
var height = document.body.clientHeight;
/*当前网页（body）的高度*/
var z_height = $(document).height();
/*判断（网页的body高度减去当前浏览器的可视高度是否等于滚动条到顶部的距离）
* 相等：则判定当前页面在底部
* 不相等：判定当前页面不在底部
* */
var stats = ( z_height - height-top < 5) ;
$("#show_s").html("top:"+top+",z_height:"+z_height+",height:"+height+",是否底部:"+stats);
if (stats) {
/*当前网页在最底部，执行该函数*/
upPullfreshFunction();
}else {
if (!pullRefreshss) {
$("#show_view").html("没有更多的数据");
}
}
}
);
function upPullfreshFunction() {
if (!pullRefreshss) {
return;
}
/*获取当前page值*/
var page=$("#page").val();
/*page+1以便来获取下一页的数据*/
page=Number(page)+Number(1)+0;
var keyWord= $("#key").val();
var orders=$("#orders").val();
if(orders=="up"){
orders="down";
}else{
orders="up";
}
var imgurl=$("#imgurl").val();
var voteimgurl = "${path }/resource/images/vote.png"
/*封装关键字，类型uuid，需要加载页页码*/
var opt={}
var url="${path}/winxin/peopleMediation/toMediatorApplyAjax?keyWord="+keyWord+"&page="+page+"&orders="+orders;
/*jqury post函数：url，跳转路径；opt：json数据包；function（res），回调函数*/
$.post(url, opt, function(res) {
if(res.code=="0"){
alert(res.errorMessage);
}else{
var data=eval(res);
$("#page").val(data.page);
var mediatorList=data.mediatorList.list;
for ( var i = 0; i < mediatorList.length; i++) {
var url="${path}/winxin/peopleMediation/mediatorApplyDetail?userUuid="+mediatorList[i].uuid+"&useruuid="+'${useruuid}'+"&source="+source;
var img = mediatorList[i].headimgurl;
if(mediatorList[i].source==2){
img = imgurl+mediatorList[i].headimgurl;
}
var str="<li class='mui-table-view-cell mui-media mui-col-xs-3' style='height: 40%'>";
str=str+"<a href="+url+">";
str=str+"<img class='mui-media-object ' src='"+img+ "'style='height:30%'>";
str=str+"</a>";
str=str+"<div class='mui-media-body' style='height:70%'>";
str=str+"<div class='m-txt-box' style='height:70%；text-align:center;'>";
str=str+"<div style = ' font-size: 10 ' >"+mediatorList[i].sequenceNumber+"-"+mediatorList[i].realname+"</div>";
str = str +"<br>";
str=str+"<div style='height: 30%;width: 100%'>";
str = str +"<button class='mui-btn btn-bg border-none' style='width:80%;height:100%' id='submit' "+"onclick=voteOn('"+mediatorList[i].uuid+"')"+">"+"投票"+"</button>";
str=str+"</div>";
str=str+"</div>";
str=str+"<p>";
str = str +"<img src = ${path }/resource/images/vote.png width = '15' height = '15'>";
str = str +" "+mediatorList[i].vote+" ";
str=str+"</p>";
str=str+"</div>";
str=str+"</li>";
;
$("#mediatorList").append(str);
}
}
if(mediatorList.length>0){
}else{
pullRefreshss = false;
}
});
}
/*function upload(){
if (pullRefreshss) {
upPullfreshFunction();
} else {
$("#show_view").html("没有更多的数据");
}
}*/
</script>