记录一下。
let this_ = this;
//上拉加载
document.getElementById("news_list").addEventListener('scroll', (e) => {
//console.log(e);
let wScrollY = document.getElementById("news_list").scrollTop; // 当前滚动条位置
let wInnerH = document.getElementById("news_list").offsetHeight; // 获取滚动元素的可见高度(不会变)
let bScrollH = document.getElementById("news_list").scrollHeight; // 滚动条总高度
//console.info(wScrollY+" - "+wInnerH+" - "+bScrollH);
if (wScrollY + wInnerH >= bScrollH) {
$(".periodNews").hide();
$(".loadMore").show();
/*
调用刷新函数
this_.findNews("", "up", "");
*/
//演示效果延迟1秒结束,实际中可注释掉
window.setTimeout(function () {
$(".loadMore").hide();
$(".periodNews").show();
}, 1000)
}
}, true);
let startY = 0;
let endY = 0;
//下拉刷新
$(".newsListDiv").on({
touchmove: function (event) {//触摸滑动事件
//console.info(event);
let touch = event.targetTouches[0];
//endX = touch.pageX;
endY = touch.pageY;
if (startY == 0) {//赋第一次值
startY = endY;
}
let wScrollY = document.getElementById("news_list").scrollTop; // 当前滚动条位置
if (wScrollY == 0 && (endY - startY) > 2) {//如果滚动条位置为0,且触摸位置移动了两个像素点,则认为开始下拉
//console.info("开始下拉");
$(".loadMoreTop").show();//显示下拉刷新区域
$(".refresh").show();//显示‘下拉刷新’文字
let height = endY - startY;//获取移动像素点
if (height > 92) {//下拉刷新区域最大高度
$(".refresh").hide();//隐藏‘下拉刷新’文字
$(".refreshWait").show();//显示‘松开刷新’文字
height = 92;
}
//$(".loadMoreTop").stop();
$(".loadMoreTop").animate({height: height + "px"}, 0);//动画
}
},
touchend: function () {//触摸结束事件
if ((endY - startY) > 90) {//如果触摸距离大于50像素点,则执行刷新
$(".refreshWait").hide();
//$(".refresh").hide();
$(".refreshing").show();
/*
调用刷新函数
this_.findNews("", "down", "");
*/
//演示效果延迟1秒结束,实际中可注释掉
window.setTimeout(function(){
$(".loadMoreTop").animate({height:"0px"},50);//回归动画
$(".refreshing").hide();
$(".refresh").show();
},1000)
} else {
$(".loadMoreTop").animate({height: "0px"}, 50);
}
startY = 0;
endY = 0;
}
});
//查询新闻
async findNews(type, refreshType?, title?) {
if (!type || type == "最新") {
type = '';
}
if (!refreshType || refreshType == "down") {//下拉
this.pageStart = 0;
this.pageEnd = 10;
} else if (refreshType == "up") {//上拉
this.pageStart = this.pageEnd;
this.pageEnd += 10;
}
//参数
let data = {
type: type,
n: this.pageStart,
m: this.pageEnd,
title: title || ''
}
let url = "";
const result = await this.http.ajax(url, data);
//如果是上拉加载则追加数组
if (refreshType && refreshType == "up") {
this.news = this.news.concat(result);
} else {
this.news = result;
}
if (refreshType) {
if (refreshType == "down") {//下拉
$(".loadMoreTop").animate({height: "0px"}, 50);//回归动画
$(".refreshing").hide();
$(".refresh").show();
} else {//上拉
$(".loadMore").hide();
$(".periodNews").show();
}
}
}
<div style="height: calc(100% - 165px)!important;position: fixed;width: 100%;" class="newsListDiv">
<div class="news_list" id="news_list">
<div class="loadMoreTop">
<div class="refresh">下拉刷新</div>
<div class="refreshWait">松开刷新</div>
<div class="refreshing">正在刷新...</div>
</div >
<div >
<div class="loadMore">正在加载更多...</div>
<div class="periodNews">没有更多新闻啦_(:з」∠)_</div>
</div >
</div >
</div>
大概就酱紫了。