全程无需重新加载整个页面，只需要上下拉即可刷新数据！
<!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,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="cleartype" content="on">
<title>title</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/jquery-3.3.1.js"></script>
</head>
<body style="background: #f5f4f9;">
<div id="minirefresh">
<div class='status' style="display: none;">刷新中...</div>
<div class="list_box">
<div class="list_photo_box">
<div class="poto">
<div>
<img src="images/photo.jpeg" style="width: 70px;height:70px;"/>
</div>
<div class="name_box">
<div class="name_b">
<div>测试名字</div>
<div class="score">
<ul>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
</div>
<div class="Occupation">
<div class="occ_box"><span>职业素养</span><span style="color: #f44739;margin-left: 5px;">A级</span></div>
<div class="occ_box"><span>职业技能</span><span style="color: #f44739;margin-left: 5px;">A级</span></div>
</div>
</div>
</div>
<div class="experience">
<div class="exp_content">年龄</div>
<div class="exp_content">五年经验</div>
<div class="exp_content">40个宝宝</div>
</div>
<div class="salary">
<div>
<span>期望薪资</span>
<span class="moey">￥5800/26天</span>
</div>
<div class="Communicate_now">立即沟通</div>
</div>
</div>
</div>
<div class="list_box">
<div class="list_photo_box">
<div class="poto">
<div>
<img src="images/photo.jpeg" style="width: 70px;height:70px;"/>
</div>
<div class="name_box">
<div class="name_b">
<div>测试名字</div>
<div class="score">
<ul>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
<li>★</li>
</ul>
</div>
</div>
<div class="Occupation">
<div class="occ_box"><span>职业素养</span><span style="color: #f44739;margin-left: 5px;">A级</span></div>
<div class="occ_box"><span>职业技能</span><span style="color: #f44739;margin-left: 5px;">A级</span></div>
</div>
</div>
</div>
<div class="experience">
<div class="exp_content">年龄</div>
<div class="exp_content">五年经验</div>
<div class="exp_content">40个宝宝</div>
</div>
<div class="salary">
<div>
<span>期望薪资</span>
<span class="moey">￥5800/26天</span>
</div>
<div class="Communicate_now">立即沟通</div>
</div>
</div>
</div>
<div class='statu' style="display: none;">加载中...</div>
</div>
</body>
<script>
//定义的全局变量
var disY, startY, endY;
//触摸事件开始时触发
$('#minirefresh').on('touchstart', function (e) {
startY = e.changedTouches[0].pageY;
});
//触摸事件移动中时触发
$('#minirefresh').on('touchmove', function (e) {
endY = e.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 30) {
$('.status').css({
display: 'block',
height: disY + 'px',
});
}
});
//触摸事件结束时触发
$('#minirefresh').on('touchend', function (e) {
endY = e.changedTouches[0].pageY;
disY = endY - startY;
if (disY > 72) {
//定义一个定时器，返回下拉到一定的高度
var timer = setInterval(function () {
disY -= 13;
if (disY <= 60) {
$('.status').css({
height: 52 + 'px',
});
clearInterval(timer);
refresh();
}
$('.status').css({
height: disY + 'px',
});
}, 75);
}
});
//请求刷新数据
function refresh() {
$('.status').css({
display: 'none',
height:0
});
var t = setTimeout(function () {
for (var i = 0; i < 13; i++) {
$('.scroll ul').append('<li>' + '添加的数据:' + parseInt(i + 1) + '</li>');
}
$('.status').css({
display: 'none',
height:0
});
clearTimeout(t)
}, 3000);
}
</script>
</html>
网友评论