作者：ThanksGiven | 来源：互联网 | 2023-09-18 12:14
自己做的项目，要求下拉刷新功能中，正在刷新，显示上次刷新时间，刷新完成，显示最新刷新时间
Mui中，正在刷新后，就直接回弹了，没有刷新完成这个过程，然后我就在中间添加了一个过程。
代码如下：
//-----------日期格式化-------------
function formatDate(now) {
var toLocaleDateString = now.toLocaleDateString();
var hour = now.getHours();
var minute = now.getMinutes();
var secOnd= now.getSeconds();
return toLocaleDateString + " " + hour + ":" + minute + ":" + second;
}
var myDate = new Date();
myDate.setTime(myDate.getTime()-4000);
var OldData = formatDate(myDate);
//-----------Mui初始化-------------
mui.init({
swipeBack: false,
pullRefresh: {
container: '#pullrefresh',
down: {
callback: pulldownRefresh,
height: 60,
auto: false,
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: ' ' + "正在刷新" + '
' + "上次刷新：" + OldData, //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
contentmore: '刷新完成'
},
}
});
//-----------下拉刷新-------------
function pulldownRefresh() {
var myDate1 = new Date();
var FirstData = formatDate(myDate1);
// console.log(FirstData);
var text = document.getElementsByClassName("mui-pull-caption");
console.log(text[0].innerHTML);
setTimeout(function() {
text[0].innerHTML = " 刷新完成" + '
' + "最新刷新：" + FirstData;
}, 2500);
// 设置刷新完成的时间为2.5秒后显示，把dom的innerHTML获取到后，修改为“刷新完成 和最新时间”即可。
setTimeout(function() {
location.reload();
mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed
}, 3000);
//设置正在刷新的时间为3秒，dom的innerHTML 为“正在刷新 和 上次刷新时间”。
}
京公网安备 11010802041100号