一、js 实现上拉加载
实现上拉加载的原理:监听滚动条滑到页面底部,然后就去做一次请求数据。
window.onscroll = function () {
const scrollH = document.documentElement.scrollHeight;// 文档的完整高度
const scrollT = document.documentElement.scrollTop || document.body.scrollTop; // 当前滚动条的垂直偏移
const screenH = window.screen.height; // 屏幕可视高度
if ((scrollH - scrollT - screenH) < 5) { // 5 只是一个相对值,可以让页面再接近底面的时候就开始请求
// 执行请求
}
};
二、js 实现下拉刷新
实现下拉刷新原理:利用移动端的 touch 事件来实现。
touch事件主要为以下几种:
- touchstart:触摸开始(手指放在触摸屏上)
- touchmove:拖动(手指在触摸屏上移动)
- touchend:触摸结束(手指从触摸屏上移开)
- touchenter:移动的手指进入一个dom元素。
- touchleave:移动的手指离开一个dom元素。
- touchcancel:是在拖动中断时候触发。
下拉刷新的过程主要是用到了触碰屏幕(touchstart),开始下拉(touchmove),松手(touchend)。
// 下拉刷新
this.outerScroller.addEventListener(
'touchstart',
function (event) {
var touch = event.targetTouches[0];
// 把元素放在手指所在的位置
this.touchStart = touch.pageY;
// event.preventDefault(); // 阻止浏览器默认下滑事件
},
false
);
this.outerScroller.addEventListener(
'touchmove',
function (event) {
var touch = event.targetTouches[0];
this.scroll.style.top =
this.scroll.offsetTop + touch.pageY - this.touchStart + 'px';
this.touchStart = touch.pageY;
this.touchDis = touch.pageY - this.touchStart;
if (this.scroll.offsetTop > 0 && document.body.scrollTop < 50) {
document.body.addEventListener('touchmove', this.preEvent, {
passive: false
}); // passive 参数不能省略,用来兼容ios和android
this.emptyDiv.style.marginTop =
Number(this.scroll.style.top.replace(/\s+|px/gi, '')) + 20 + 'px'; // 让下拉的父级高度等于下滑部分+下滑距离,让整体呈现下拉的感觉
} else {
return;
}
if (this.scroll.offsetTop >= 80) {
// 限制下拉的距离
this.scroll.style.top = '80px';
}
},
false
);
this.outerScroller.addEventListener(
'touchend',
function (event) {
this.touchStart = 0;
var top = this.scroll.offsetTop;
var num = this.scroll.style.top.replace(/\s+|px/gi, ''); // 将top值转成数值
if (num < 0) {
// 当上滑到顶部的时候,不超过边界
this.scroll.style.top = '0px';
return;
}
if (top > 40) refresh();
if (top > 0) {
var time = setInterval(function () {
this.scroll.style.top = this.scroll.offsetTop - 2 + 'px';
this.emptyDiv.style.marginTop =
Number(this.scroll.style.top.replace(/\s+|px/gi, '') + 20) +
'px'; // 让下拉的父级高度等于下滑部分+下滑距离,让整体呈现下拉的感觉
if (this.scroll.offsetTop <= 0) clearInterval(time);
}, 1);
}
/* var time = setTimeout(function(){
scroll.style.top = scroll.offsetTop -2+'px';
emptyDiv.style.height = Number(360) + Number(scroll.style.top.replace(/\s+|px/gi,"")) + 'px'; // 让下拉的父级高度等于下滑部分+下滑距离,让整体呈现下拉的感觉
if(scroll.offsetTop<=0)clearTimeout(time);
time();
},1)
while(top>0){
time();
} */
// event.stopPropagation();
// window.event.returnValue = false;
document.body.removeEventListener('touchmove', this.preEvent, {
passive: false
}); // passive 参数不能省略,用来兼容ios和android
},
false
);
function refresh () {
console.log('下拉刷新');
}
三、注意事项
- 防抖的情况。
- 没有数据的情况。
【参考】
https://www.cnblogs.com/xinsir/articles/10475055.html
https://www.cnblogs.com/xinsir/p/10314694.html