通過偏移量實現頁面底部內容載入
阿新 • • 發佈:2019-01-24
本文是實現網頁底部載入新資料的小demo。
效果如圖:
demo地址:demo
1、如何判斷網頁是否滑動到了底部?
如圖,黑色區域為網頁的真正長度,紅色區域為使用者可見區域(也就是瀏覽器所展現的趨於)。那麼就得出了:scrollTop+windowHeight=srollHeight時,使用者瀏覽到頁面最底部。
作者:軌跡
我們只需要在使用者瀏覽到最底部時,請求新資料即可。但是不是直接請求新資料,而是要在已讀取的資料基礎上,增添還未讀取到的資料。本文使用的是偏移量來實現。
2、具體實現
通過前端記錄併發送偏移量給後端,後端再根據偏移量查詢資料並返回。
因為是個小demo,為了個人方便和展示方便,能寫在一起的都寫在一起了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
var offset = 0;//偏移量
var nodata = false; //判斷是否還有可讀資料
var key = true ; //專門針對微信設定的key,否則在微信瀏覽器下資料會重複或錯亂
$(document).ready(function() {
$(window).scroll(function () {
var scrollTop = $(this).scrollTop();
var scrollHeight = $(document).height();
var windowHeight = $(this).height();
//如果滾動到底部則獲取資料
if(scrollTop + windowHeight >= scrollHeight && nodata==false && key==true) {
key = false;
$("#dialog").show();//提示正在載入
var url = "load.do";
var data = {
offset: offset + ''
};
$.post(url, data, function(data, status) {
if(data.arg0=="暫無資料"){
$("#ul").html($("#ul").html()+"<li>"+ data.arg0+"</li>");
nodata = true;
}else{
if(data.arg0!=null)
$("#ul").html($("#ul").html()+"<li>"+ data.arg0+"</li>");
if(data.arg1!=null)
$("#ul").html($("#ul").html()+"<li>"+ data.arg1+"</li>");
if(data.arg2!=null)
$("#ul").html($("#ul").html()+"<li>"+ data.arg2+"</li>");
if(data.arg3!=null)
$("#ul").html($("#ul").html()+"<li>"+ data.arg3+"</li>");
if(data.arg4!=null)
$("#ul").html($("#ul").html()+"<li>"+ data.arg4+"</li>");
offset = offset + 5;
}
$("#dialog").hide();
key = true;
});
}
});
});
</script>
<style type="text/css">
li {
height:50px;
width:100%;
display:block;
border:1px solid gray
}
ul{
margin:0 auto;
padding:0;
}
.dialog{
position: fixed;
bottom: 30px;
display: block;
width: 30%;
left: 35%;
border-radius: 5px;
height: 40px;
line-height: 40px;
background-color: #808080;
text-align: center;
color: white;
opacity: 0.7;
}
</style>
</head>
<body >
<div class="" style="width: 100%;height:800px;" id="div">
<ul id="ul">
<li>hello world!</li>
</ul>
</div>
<span class="dialog" id="dialog" hidden="true">
載入中...
</span>
</body>
</html>
@Controller
public class MyController {
@RequestMapping(value="/load")
public @ResponseBody Data loadNext(@RequestParam(value="offset",required=false) int offset){
ListData listData = new ListData();
listData.initData();//初始化資料
Data data = listData.getDataByOffset(offset);//通過偏移量獲取資料
//判斷是否還有可讀資料
if(data==null) {
return new Data("暫無資料","","","","");
}
return data;
}
}
/**
* 偽資料庫
* @author sam
*
*/
public class ListData {
//資料集合
private List<String> data = new ArrayList<String>();
/*
* 初始化(假)資料,假設是從資料庫中查詢到的。
*/
public void initData() {
for (int i = 0; i < 152; i++) {
data.add("這是第"+i+"條資料");
}
}
/*
* 從偏移的位置開始讀取資料
*
* 這一步可以直接通過資料庫 limit offset等操作完成!
*/
public Data getDataByOffset(int offset) {
//防止越界
if(data.size() - offset >= 5) {
//有>=5條的資料可讀
String arg0 = data.get(offset);
String arg1 = data.get(offset+1);
String arg2 = data.get(offset+2);
String arg3 = data.get(offset+3);
String arg4 = data.get(offset+4);
return new Data(arg0,arg1,arg2,arg3,arg4);
}else if(offset < data.size() ){
//有1~4條的資料可讀
int readable = data.size() - offset; //剩餘可讀條數
Data datas = new Data();
switch (readable) {
case 4: String arg3 = data.get(offset+3);
datas.setArg3(arg3);
case 3: String arg2 = data.get(offset+2);
datas.setArg2(arg2);
case 2: String arg1 = data.get(offset+1);
datas.setArg1(arg1);
case 1: String arg0 = data.get(offset);
datas.setArg0(arg0);
break;
default:
break;
}
return datas;
}
else {
//無資料可讀
return null;
}
}
}
/**
* DTO
* @author xswift.軌跡
*
*/
public class Data {
private String arg0;
private String arg1;
private String arg2;
private String arg3;
private String arg4;
//省略getter、setter和構造器
}
3、遇到的問題
在電腦的chrome和手機uc都正常的情況下,使用微信瀏覽器會出現重複載入和漏載入的情況,所以在傳送ajax時新增一個key,類似於臨界區的訪問。