使用MUI框架，模擬手機端的下拉刷新，上拉載入操作。

套用mui官方文檔的一句話：“開發者只需關心業務邏輯，實現載入更多數據即可”。真的是不錯的框架。

想更多的瞭解這個框架：http://dev.dcloud.net.cn/mui/

那麼如何實現下拉刷新，上拉載入的功能呢？

首先需要一個容器：

1 <!--下拉刷新容器-->
2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
3 　　<div class="mui-scroll">
4 　　<!--數據列表-->
5 　　　　<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
6 　　</div>
7 </div>

然後進行初始化操作，通過mui.init方法中pullRefresh參數配置上拉載入各項參數：

mui.init({
  pullRefresh : {
    container:refreshContainer,//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
    up : {
      height:50,//可選.預設50.觸發上拉載入拖動距離
      auto:true,//可選,預設false.自動上拉載入一次
      contentrefresh : "正在載入...",//可選，正在載入狀態時，上拉載入控制項上顯示的標題內容
      contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
      callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，比如通過ajax從伺服器獲取新數據；
    }
  }
});

這裡重點關註callback參數項，為必選內容，裡邊寫刷新函數，根據具體的業務來寫，在實際項目中，通常是通過ajax從伺服器獲取數據，然後進行html的動態拼接，形成數據項。

下麵舉一個很簡單的例子：（實現上拉載入的功能）

容器：

1 1 <!--下拉刷新容器-->
2 2 <div id="refreshContainer" class="mui-content mui-scroll-wrapper">
3 3 　　<div class="mui-scroll">
4 4 　　<!--數據列表-->
5 5 　　　　<ul id="testUl" class="mui-table-view mui-table-view-chevron"></ul>
6 6 　　</div>
7 7 </div>

一會要將數據放到 id=“testUl”的ul標簽下，id當然隨便取

調用mui.init方法：

 1 <script type="text/javascript">
 2     mui.init({
 3         pullRefresh : {
 4             container:refreshContainer,//待刷新區域標識，querySelector能定位的css選擇器均可，比如：id、.class等
 5             up : {
 6                 height:50,//可選.預設50.觸發上拉載入拖動距離
 7                 auto:true,//可選,預設false.自動上拉載入一次
 8                 contentrefresh : "正在載入...",//可選，正在載入狀態時，上拉載入控制項上顯示的標題內容
 9                 contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
10                 callback: function () {//必選，刷新函數，根據具體業務來編寫，比如通過ajax從伺服器獲取新數據；
11 
12                     /*每次載入動態的添加一個li*/
13                     $("#testUl").append($("<li>" + new Date() + "</li>"));
14 
15                     this.endPullupToRefresh(false);
16                 } 
17                 }
18                 }
19                 });
20 </script>    

callback參數中，寫的是載入函數，每次載入，動態生成一個li標簽，用當前時間作為測試數據，貼到id=testUl的ul標簽之下。

這裡註意callback中的function最後的 this.endPullupToRefresh(false); 表示結束載入，參數可選true或false，true表示結束載入，false繼續載入，在實際項目應用中，通常要根據伺服器回傳的數據量做一下判斷。

over!! 這樣每次上拉，都會載入一條當前的時間。