Mui 下拉重新整理，重新整理完成功能實現
阿新 • • 發佈：2018-12-29
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 為“正在重新整理 和 上次重新整理時間”。 }