<!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>
*{
padding: 0;
margin: 0;
}
html,body,.app{
width: 100%;
height: 100%;
}
.page{
width: 100%;
height: 100%;
}
.refreshTxt,.loadingTxt{
width: 100%;
height: 36px;
line-height: 36px;
text-align: center;
background-color: gray;
color: white;
display: none;
}
</style>
</head>
<body>
<div class="app">
<div class="page">
<div class="container">
<p class="refreshTxt">刷新中...</p>
<div class="content">
<ul class="list1">
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
<li>1</li>
</ul>
</div>
<p class="loadingTxt">加载中...</p>
</div>
</div>
</div>
<script>
const html=document.documentElement
const refreshTxt=document.querySelector('.refreshTxt')
const loadingTxt=document.querySelector('.loadingTxt')
const list1=document.querySelector('.list1')
// 记录开始、结束触点和当前页码
let startPoint,endPoint,page=1
// 触摸开始监听
window.ontouchstart=(e)=>{
startPoint=e.changedTouches[0]
}
// 触摸结束监听
window.ontouchend=(e)=>{
endPoint=e.changedTouches[0]
if(html.scrollTop===0 &&
endPoint.screenY-startPoint.screenY>80 &&
Math.abs(endPoint.screenX-startPoint.screenX)<20)
{
// 下拉触发
refreshTxt.style.display='block'
setTimeout(()=>{
refreshTxt.style.display='none'
location.reload()
},2000)
}
// 如果要完全到底部的话不太好触发,时常不灵,所以将距离设置为小于10时触发
// if(html.clientHeight+html.scrollTop===html.scrollHeight && startPoint.screenY-endPoint.screenY>30 && Math.abs(endPoint.screenX-startPoint.screenX)<20)
if(html.scrollHeight-(html.clientHeight+html.scrollTop)<10 &&
startPoint.screenY-endPoint.screenY>30 &&
Math.abs(endPoint.screenX-startPoint.screenX)<20)
{
// 上拉触发
setTimeout(()=>{
loadingTxt.style.display='none'
page++
const newList=[]
for(let i=0;i<10;i++){
const li=document.createElement('li')
li.innerText=page
newList.push(li)
}
list1.append(...newList)
},2000)
loadingTxt.style.display='block'
html.scrollTo(0,html.scrollHeight)
}
}
</script>
</body>
</html>
原生js 下拉刷新 +上拉加载
最新推荐文章于 2024-03-10 22:25:49 发布