最近在公司做了我們的pc端網(wǎng)站。
需求：實(shí)現(xiàn)網(wǎng)頁的下拉加載頁面
思路：<div>中包含list,這是一個(gè)list中包含的元素塊一個(gè)一個(gè)顯示。
js監(jiān)聽windows的滾動(dòng)條，判斷滾動(dòng)條下拉到窗口最下方時(shí)調(diào)用js方法，js方法，先動(dòng)態(tài)加載一個(gè)上邊list中的元素塊，然后在追加append到上邊list下邊。
pc端代碼如下：
手機(jī)端代碼如下：
<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 () {
/*當(dāng)前滾動(dòng)條到頂部的距離*/
var top = $(document).scrollTop();
/*當(dāng)前瀏覽器的可是高度*/
var height = document.body.clientHeight;
/*當(dāng)前網(wǎng)頁（body）的高度*/
var z_height = $(document).height();
/*判斷（網(wǎng)頁的body高度減去當(dāng)前瀏覽器的可視高度是否等于滾動(dòng)條到頂部的距離）
* 相等：則判定當(dāng)前頁面在底部
* 不相等：判定當(dāng)前頁面不在底部
* */
var stats = ( z_height - height-top < 5) ;
$("#show_s").html("top:"+top+",z_height:"+z_height+",height:"+height+",是否底部:"+stats);
if (stats) {
/*當(dāng)前網(wǎng)頁在最底部，執(zhí)行該函數(shù)*/
upPullfreshFunction();
}else {
if (!pullRefreshss) {
$("#show_view").html("沒有更多的數(shù)據(jù)");
}
}
}
);
function upPullfreshFunction() {
if (!pullRefreshss) {
return;
}
/*獲取當(dāng)前page值*/
var page=$("#page").val();
/*page+1以便來獲取下一頁的數(shù)據(jù)*/
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"
/*封裝關(guān)鍵字，類型uuid，需要加載頁頁碼*/
var opt={}
var url="${path}/winxin/peopleMediation/toMediatorApplyAjax?keyWord="+keyWord+"&page="+page+"&orders="+orders;
/*jqury post函數(shù)：url，跳轉(zhuǎn)路徑；opt：json數(shù)據(jù)包；function（res），回調(diào)函數(shù)*/
$.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("沒有更多的數(shù)據(jù)");
}
}*/
</script>