本節(jié)知識(shí)點(diǎn)
(一) 創(chuàng)建子頁面具體參照第一講
mui.init({
subpages:[{
url:pullrefresh-subpage-url,//下拉刷新內(nèi)容頁面地址
id:pullrefresh-subpage-id,//內(nèi)容頁面標(biāo)志
styles:{ top:subpage-top-position,//內(nèi)容頁面頂部位置,需根據(jù)實(shí)際頁面布局計(jì)算啄清,若使用標(biāo)準(zhǔn)mui導(dǎo)航软舌,頂部默認(rèn)為48px; .....//其它參數(shù)定義
}
}]
});
(二) 內(nèi)容頁面需按照如下DOM結(jié)構(gòu)構(gòu)建
<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--數(shù)據(jù)列表-->
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">1</li>
</ul>
</div>
</div>
第三步:通過mui.init方法中pullRefresh參數(shù)配置下拉刷新各項(xiàng)參數(shù)
mui.init({
pullRefresh : {
container:"#pullrefresh",//待刷新區(qū)域標(biāo)識(shí)鬼佣,querySelector能定位的css選擇器均可,比如:id倍阐、.class等
up : {
contentrefresh : "正在加載...",//可選世澜,正在加載狀態(tài)時(shí),上拉加載控件上顯示的標(biāo)題內(nèi)容
contentnomore:'沒有更多數(shù)據(jù)了',//可選余赢,請(qǐng)求完畢若沒有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容;
callback : fn //必選肛搬,刷新函數(shù)没佑,根據(jù)具體業(yè)務(wù)來編寫毕贼,比如通過ajax從服務(wù)器獲取新數(shù)據(jù)温赔;
}
}
});
第四部 設(shè)置執(zhí)行函數(shù)
function fn() {
//業(yè)務(wù)邏輯代碼,比如通過ajax從服務(wù)器獲取新數(shù)據(jù)鬼癣; ...... //注意陶贼,加載完新數(shù)據(jù)后,必須執(zhí)行如下代碼待秃,true表示沒有更多數(shù)據(jù)了拜秧,
// 兩個(gè)注意事項(xiàng): //1、若為ajax請(qǐng)求章郁,則需將如下代碼放置在處理完ajax響應(yīng)數(shù)據(jù)之后 //
// 2枉氮、注意this的作用域,若存在匿名函數(shù)暖庄,需將this復(fù)制后使用
//要么寫true要么寫false聊替。true就表示沒有更多數(shù)據(jù)了。false就是在加載
//當(dāng)數(shù)據(jù)庫里面沒有數(shù)據(jù)了就寫_this.endPullupToRefresh(true);
var _this = this;
_this.endPullupToRefresh(true|false);
}