Mui 下拉刷新，刷新完成功能实现

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 为“正在刷新 和 上次刷新时间”。

}