大家好！我叫戴向天
QQ群：602504799
QQ:809002582
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<title>上拉加载&下拉刷新</title>
<style>
*{
padding:0;
margin:0;
list-style:none;
}
div{
height: 100vh;
overflow:hidden;
position:relative;
}
p{
position:fixed;
left:0;
right:0;
color:#666;
height:100px;
display:flex;
align-items:center;
justify-content:center;
z-index:0;
text-align:center;
background:#eee;
}
p:nth-child(1){
top:0;
}
p:nth-child(3){
bottom:0;
}
ul{
min-height:100vh;
position:relative;
z-index:1
}
li{
height:50px;
text-align:center;
font-size:18px;
border-bottom:1px solid #eee;
line-height:50px;
background:#fff;
}
</style>
</head>
<body>
<div>
<p>正在刷新...</p>
<ul></ul>
<p>正在加载...</p>
</div>
<script>
function refreshAndLoad(option){
if(!option.dom)return false;
let
dom = option.dom.parentNode,
list = option.dom,
offset = 50,//最大溢出值
cur = 0,//列表滑动位置
isDown = false,
vy = 0,//滑动的力度
fl = 100,//弹力,值越大,到度或到顶后,可以继续拉的越远
isInTransition = false;//是否在滚动中
if(!list)return false;
const
isPC = (function(){
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}()),
start = isPC?'mousedown':'touchstart',
move = isPC?'mousemove':'touchmove',
end = isPC?'mouseup':'touchend';
function setPos(y) {//传们列表y轴位置,移动列表
list.style.transform = "translateY(" + y + "px) translateZ(0)";
}
function ease(target) {
isInTransition = true;
dom._timer = setInterval(function () {//回弹算法为 当前位置 减 目标位置 取2个百分点 递减
cur -= (cur - target) * 0.2;
if (Math.abs(cur - target) < 1) {//减到 当前位置 与 目标位置相差小于1 之后直接归位
cur = target;
clearInterval(dom._timer);
isInTransition = false;
}
setPos(cur);
}, 20);
}
function endHandle(e){
if (isDown) {
isDown = false;
const
t = this,
friction = ((vy >> 31) * 2 + 1) * 0.5,
oh = this.scrollHeight - this.clientHeight;
this._timer = setInterval(function () {
vy -= friction;
cur += vy;
setPos(cur);
(-cur - oh > offset || cur - offset >= fl / 3 || cur > offset || Math.abs(vy) < 1 )&&clearTimeout(t._timer);
if (-cur - oh > offset)
return Math.abs((-cur - oh) - offset) >= fl / 3
?option.load?option.load(function(){ease(-oh)})
:function(){ease(-oh)}:ease(-oh)
return cur - offset >= fl / 3
?option.refresh?option.refresh(function(){ease(0)}):function(){ease(0)}:cur > offset
?ease(0):Math.abs(vy) < 1&&(cur > 0 ? ease(0) : -cur > oh && ease(-oh))
},16)
}
}
function startHandle(e){
if (isInTransition)return;//如果在滚动中，则中止执行
clearTimeout(this._timer);//清除定时器
vy = 0;
const touch = e.touches?e.touches[0]:e;
this._oy = touch.clientY - cur;
this._cy = touch.clientY;
this._oh = this.scrollHeight;
this._ch = this.clientHeight;
this._startTime = e.timeStamp;
isDown = true;
}
function moveHandle(e){
const touch = e.touches?e.touches[0]:e;
if (isDown) {
if (e.timeStamp - this._startTime > 40) {
this._startTime = e.timeStamp;
cur = touch.clientY - this._oy;
if (cur > 0) {
cur *= fl / (fl + cur);
}else if (cur < this._ch - this._oh) {
cur += this._oh - this._ch;
cur = cur * fl / (fl - cur) - this._oh + this._ch;
}
setPos(cur);
}
}
vy = touch.clientY - this._cy;
this._cy = touch.clientY;
}
dom.addEventListener(start,startHandle,false)
dom.addEventListener(move,moveHandle,false)
dom.addEventListener(end,endHandle,false)
dom.addEventListener("mouseleave", endHandle, false);
}
const ul = document.querySelector("ul");
let index = 1
for(let i = 0; i< 20;i++){
let li = document.createElement('li');
li.innerHTML = i+1;
ul.appendChild(li)
}
refreshAndLoad({
dom:ul,
load(done){ //加载更多
setTimeout(function(){
index++
for(let i = 0; i < 20;i++){
let li = document.createElement('li');
li.innerHTML = (index * 20 ) + i+1;
ul.appendChild(li)
}
index++
done()
},3 * 1000)
},
refresh(done){ //刷新处理
setTimeout(function(){
index = 0
ul.innerHTML = null
for(let i = 0; i < 20;i++){
let li = document.createElement('li');
li.innerHTML = i+1;
ul.appendChild(li)
}
done()
},3 * 1000)
}
})
</script>
</body>
</html>
借鉴：https://www.cnblogs.com/ranyonsue/p/8119155.html