手機端滾動分頁載入資料模型
阿新 • • 發佈:2019-02-15
說明:執行demo
的時候請將瀏覽器模式調整到蘋果5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
width: 100%;
height: auto;
}
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear : both;
overflow: hidden;
}
li {
list-style: none;
width: 130px;
height: 130px;
background: pink;
float: left;
margin: 10px;
}
</style>
</head>
<body>
<ul class="clearfix" id="list-group">
</ul>
</body>
<script>
function createLi(num) {
var ulDom = document.getElementById("list-group");
//每次建立num個
for (var i = 0; i < num; i++) {
var liDom = document.createElement("li");
liDom.innerHTML = i;
ulDom.appendChild(liDom);
}
}
createLi(10);
//獲取螢幕高度
var maxHeight = document.documentElement.clientHeight;
window.onscroll = function() {
//獲取最後一個元素距離頂部的高度
var liDomHeight = document.getElementById("list-group").lastChild.offsetTop;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
//當最後一個距離頂部的距離小於螢幕的高度+滾動條的高度就載入資料
if (liDomHeight < (maxHeight + scrollTop)) {
createLi(10);
}
}
</script>
</html>
</html>