原生js的懒加载
写了一个原生懒加载页面,触底加载、搜索刷新、节流等
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.outDiv{
background-color: aquamarine;
margin:20px 0;
position: relative;
}
#layuiFa{
margin:0 auto;
width: 80%;
height: 400px;
background-color: burlywood;
display: flex;
overflow: auto;
flex-wrap: wrap;
}
#layuiFa li{
width:200px;
height:200px;
background-color: cornsilk;
margin:20px;
list-style: none;
}
/* .getMore{
position:absolute;
bottom: 0;
left:50%;
cursor: pointer;
background-color: darkgoldenrod;
display: none;
} */
.noMore{
position:absolute;
bottom: 0;
left:50%;
display: none;
color: bisque;
}
</style>
</head>
<body>
<div>
<p>懒加载</p>
<input type="text" id="inputText"><button onclick="searchItem()">搜搜</button>
<div class="outDiv">
<ul id="layuiFa">
<p class="noMore" id="noMore">没有更多了...</p>
</ul>
<!-- <button class="getMore" id="getMore" onclick="getMoreMsg()">加载更多</button> -->
</div>
</div>
<script>
//保存搜索条件
let pageMsg ={
page:1, //当前页
maxPage:null,//最多搜索到第几页
asign:'',//搜索内容
isGetChiild:true,//节流-是否调用接口
}
//获取input框内容
let getInputValue = function(){
let inputText = document.getElementById('inputText');
let textValue = inputText.value;
//存储input value
pageMsg.asign = textValue;
}
//点击搜索按钮
let searchItem = function(){
let layuiFa = document.getElementById('layuiFa');
let childList = document.querySelectorAll('#layuiFa li')
childList.forEach(item=>{
item.remove();
})
getChild(1) //重新获取数据
}
//后台接口数据
let getChild = function(index){
getInputValue();
let data={
page:index ? 1: pageMsg.page,//第几页
asign:pageMsg.asign,//输入框内容
}
//当点击搜索时 初始化page
if(index){
pageMsg.page = 1;
}
let layuiFa = document.getElementById('layuiFa');
let fragment = document.createDocumentFragment();
//这里去请求接口
for (var i = 0; i < 20; i++) {
var li = document.createElement("li");
li.innerHTML = "index: " + i;
fragment.appendChild(li);
}
layuiFa.appendChild(fragment);
//更新搜索条件和关闭节流,并且判断是否可以接续加载
pageMsg.isGetChiild = true;
pageMsg.page ++;
pageMsg.maxPage = 5;//这里是写死的假数据
}
//判断是否加载更多
let isCanMore = function(isMore){
// let getMore =document.getElementById('getMore');
let noMore =document.getElementById('noMore');
if(isMore){
// getMore.style.display = 'block';
noMore.style.display = 'none';
}else{
// getMore.style.display = 'none';
noMore.style.display = 'block';
}
}
//加载更多方法
let getMoreMsg = function(){
getChild();
}
//滚动栏事件监听
let layuiFa =document.getElementById('layuiFa');
layuiFa.onscroll =function(e){
// 滚动高度(scrollTop)
// 实际高度(scrollHeight)
// 可视高度(offsetHeight)
let scrollTop = e.target.scrollTop;
let scrollHeight = e.target.scrollHeight;
let offsetHeight = Math.ceil(e.target.getBoundingClientRect().height);
let currentHeight = scrollTop + offsetHeight + 100;
if(currentHeight > scrollHeight){
//这里判断触底,并且用节流,判断是否调用接口
if(pageMsg.isGetChiild && pageMsg.page < pageMsg.maxPage){
pageMsg.isGetChiild = false;
getChild();
}
}
//展示没有更多
if(currentHeight > (scrollHeight+90) && pageMsg.page >= pageMsg.maxPage){
isCanMore(false);
}else{
isCanMore(true);
}
}
//初始化调用
getChild()
</script>
</body>
</html>