一、下拉刷新
思路:
1。在想要显示刷新提示的地方,放一个嵌套盒子,子盒子相对父盒子相对定位,父盒子高度默认为0,子盒子高度固定。
2。利用手指滑动事件,touchstart、touchmove、touchend。
3。数据是模拟的,注意每次调用函数清除定时器。
//html
<div id="pull-down" class="pull-down">
<div class="pull-down-content">松手加载更多</div>
</div>
<ul id="newlist">
<li>
<h2>告诉孩子:努力不苦,不努力的人生才苦!(深度好文)</h2>
<div class="img-box">
<div class="img"> <img src="./img/05.jpg" alt=""></div>
<div class="img"> <img src="./img/05.jpg" alt=""></div>
<div class="img"> <img src="./img/05.jpg" alt=""></div>
</div>
<div class="tips">
<span>9999阅读</span>
<span>美文</span>
</div>
</li>
</ul>
/*css*/
.pull-down{
position:relative;overflow:hidden;height:0;
max-height: 60px;
}
.pull-down-content{
position:absolute;bottom:0;
text-align: center;
line-height: 30px;
color: #999;
width: 100%;
}
$(function(){
//分别设置滑动距离,开始位置,结束位置,和模拟数据的定时器
let disY, startY, endY,timer,t;
// 触摸开始
$('#newlist').on('touchstart',function(e){
startY = e.originalEvent.changedTouches[0].pageY;//开始时的坐标
});
// 移动中
$('#newlist').on('touchmove',function(e){
endY = e.originalEvent.changedTouches[0].pageY;
disY = endY- startY;//移动后的坐标减去开始坐标,滑动距离。
if(disY < 60){
$('#pull-down').css({
height:disY+'px';//父盒子的高度随着滑动距离变化,有最大值。
});
}else{
$('#pull-down').css({
height:60+'px';//父盒子的最大高度
});
}
});
// 结束时
$('#newlist').on('touchend',function(e){
clearInterval(timer);
endY = e.originalEvent.changedTouches[0].pageY;
disY = endY-startY;
if(disY>30){
timer=setInterval(function(){
disY-=5;
if(disY<=30){
$('#pull-down').css({
height:30+'px'//松手后的返回。
});
clearInterval(timer);
refresh();//加载数据
}
$('#pull-down').css({
height:disY+'px'
});
},100)
}
})
// 请求数据
function refresh(){
clearTimeout(t);
t =setTimeout(function(){//延时器模拟的数据请求
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
list +=
`
<li>
<h2>${data[i].title}</h2>
<div class="img-box">
<div class="img"> <img src="${data[i].images[0]}" alt=""></div>
<div class="img"> <img src="${data[i].images[1]}" alt=""></div>
<div class="img"> <img src="${data[i].images[2]}" alt=""></div>
</div>
<div class="tips">
<span>${data[i].views}阅读</span>
<span>${data[i].category}</span>
</div>
</li>
`
}
$('#newlist').append(list);
$('#pull-down').css({
height:0
});
clearTimeout(t);//定时器技术时候要记得清除,每次调用事件之前,最好也清除下。
},3000);
}
})
二、上拉加载更多
思路:
1。主要是监听的浏览器滚动事件,看自己需求
2。比较简单,做的是上拉无限加载,加载条数,加载提示,触发开关没设置,看自己需求。
$(function(){
//获取滚动条当前的位置
function getScrollTop() {
var scrollTop = 0;
if (document.documentElement && document.documentElement.scrollTop) {
scrollTop = document.documentElement.scrollTop;
} else if (document.body) {
scrollTop = document.body.scrollTop;
}
return scrollTop;
}
//获取当前可视范围的高度
function getClientHeight() {
var clientHeight = 0;
if (document.body.clientHeight && document.documentElement.clientHeight) {
clientHeight = Math.min(document.body.clientHeight, document.documentElement.clientHeight);
} else {
clientHeight = Math.max(document.body.clientHeight, document.documentElement.clientHeight);
}
return clientHeight;
}
//获取文档完整的高度
function getScrollHeight() {
return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
}
//滚动事件触发
window.onscroll = function () {
if (getScrollTop() + getClientHeight() === getScrollHeight()) {
for (let i = 0; i < data.length; i++) {
console.log(data[i]);
list +=
`
<li>
<h2>${data[i].title}</h2>
<div class="img-box">
<div class="img"> <img src="${data[i].images[0]}" alt=""></div>
<div class="img"> <img src="${data[i].images[1]}" alt=""></div>
<div class="img"> <img src="${data[i].images[2]}" alt=""></div>
</div>
<div class="tips">
<span>${data[i].views}阅读</span>
<span>${data[i].category}</span>
</div>
</li>
`
}
$('#newlist').append(list);
}
};
})