通過偏移量實現頁面底部內容載入
阿新 • • 發佈：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" @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，類似於臨界區的訪問。