欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能

 更新時(shí)間:2017年09月04日 11:17:14   作者:##Finder&  
mui框架基于htm5plus的XMLHttpRequest,封裝了常用的Ajax函數(shù)。本文重點(diǎn)給大家介紹使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能,感興趣的朋友參考下吧

mui框架基于htm5plus的XMLHttpRequest,封裝了常用的Ajax函數(shù),支持GET、POST請(qǐng)求方式,支持返回json、xml、html、text、script數(shù)據(jù)類(lèi)型; 本著極簡(jiǎn)的設(shè)計(jì)原則,mui提供了mui.ajax方法,并在mui.ajax方法基礎(chǔ)上,進(jìn)一步簡(jiǎn)化出最常用的mui.get()、mui.getJSON()、mui.post()三個(gè)方法。

套用mui官方文檔的一句話:“開(kāi)發(fā)者只需關(guān)心業(yè)務(wù)邏輯,實(shí)現(xiàn)加載更多數(shù)據(jù)即可”。真的是不錯(cuò)的框架。

想更多的了解這個(gè)框架:http://dev.dcloud.net.cn/mui/

那么如何實(shí)現(xiàn)下拉刷新,上拉加載的功能呢?

首先需要一個(gè)容器:

<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
  <!--數(shù)據(jù)列表-->
    <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
  </div>
</div>

然后進(jìn)行初始化操作,通過(guò)mui.init方法中pullRefresh參數(shù)配置上拉加載各項(xiàng)參數(shù):

mui.init({
 pullRefresh : {
 container:refreshContainer,//待刷新區(qū)域標(biāo)識(shí),querySelector能定位的css選擇器均可,比如:id、.class等
 up : {
 height:50,//可選.默認(rèn)50.觸發(fā)上拉加載拖動(dòng)距離
 auto:true,//可選,默認(rèn)false.自動(dòng)上拉加載一次
 contentrefresh : "正在加載...",//可選,正在加載狀態(tài)時(shí),上拉加載控件上顯示的標(biāo)題內(nèi)容
 contentnomore:'沒(méi)有更多數(shù)據(jù)了',//可選,請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容;
 callback :pullfresh-function //必選,刷新函數(shù),根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě),比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù);
 }
 }
});

這里重點(diǎn)關(guān)注callback參數(shù)項(xiàng),為必選內(nèi)容,里邊寫(xiě)刷新函數(shù),根據(jù)具體的業(yè)務(wù)來(lái)寫(xiě),在實(shí)際項(xiàng)目中,通常是通過(guò)ajax從服務(wù)器獲取數(shù)據(jù),然后進(jìn)行html的動(dòng)態(tài)拼接,形成數(shù)據(jù)項(xiàng)。

下面舉一個(gè)很簡(jiǎn)單的例子:(實(shí)現(xiàn)上拉加載的功能)

容器:

 <!--下拉刷新容器-->
 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
  <div class="mui-scroll">
  <!--數(shù)據(jù)列表-->
     <ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
  </div>
 </div>

一會(huì)要將數(shù)據(jù)放到 id=“testUl”的ul標(biāo)簽下,id當(dāng)然隨便取

調(diào)用mui.init方法:

<script type="text/javascript">
 mui.init({
  pullRefresh : {
   container:refreshContainer,//待刷新區(qū)域標(biāo)識(shí),querySelector能定位的css選擇器均可,比如:id、.class等
   up : {
    height:50,//可選.默認(rèn)50.觸發(fā)上拉加載拖動(dòng)距離
    auto:true,//可選,默認(rèn)false.自動(dòng)上拉加載一次
    contentrefresh : "正在加載...",//可選,正在加載狀態(tài)時(shí),上拉加載控件上顯示的標(biāo)題內(nèi)容
    contentnomore:'沒(méi)有更多數(shù)據(jù)了',//可選,請(qǐng)求完畢若沒(méi)有更多數(shù)據(jù)時(shí)顯示的提醒內(nèi)容;
    callback: function () {//必選,刷新函數(shù),根據(jù)具體業(yè)務(wù)來(lái)編寫(xiě),比如通過(guò)ajax從服務(wù)器獲取新數(shù)據(jù);
     /*每次加載動(dòng)態(tài)的添加一個(gè)li*/
     $("#testUl").append($("<li>" + new Date() + "</li>"));
     this.endPullupToRefresh(false);
    } 
    }
    }
    });
</script>

callback參數(shù)中,寫(xiě)的是加載函數(shù),每次加載,動(dòng)態(tài)生成一個(gè)li標(biāo)簽,用當(dāng)前時(shí)間作為測(cè)試數(shù)據(jù),貼到id=testUl的ul標(biāo)簽之下。

這里注意callback中的function最后的 this.endPullupToRefresh(false); 表示結(jié)束加載,參數(shù)可選true或false,true表示結(jié)束加載,false繼續(xù)加載,在實(shí)際項(xiàng)目應(yīng)用中,通常要根據(jù)服務(wù)器回傳的數(shù)據(jù)量做一下判斷。

over!! 這樣每次上拉,都會(huì)加載一條當(dāng)前的時(shí)間。

總結(jié)

以上所述是小編給大家介紹的使用MUI框架模擬手機(jī)端的下拉刷新和上拉加載功能,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!

相關(guān)文章

最新評(píng)論