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 為“正在刷新 和 上次刷新時間”。

}