MUI實現上拉刷新和下拉加載

  前  言

ha ha

　爲實現下拉刷新功能，大多H5框架都是經過DIV模擬下拉回彈動畫，在低端android手機上，DIV動畫常常出現卡頓現象（特別是圖文列表的狀況）； mui經過雙webview解決這個DIV的拖動流暢度問題；拖動時，拖動的不是div，而是一個完整的webview（子webview），回彈動畫使用原生動畫。

　mui的上拉加載和下拉刷新相似，都屬於pullRefresh插件。

 

上拉刷新

主頁面內容比較簡單，只須要建立子頁面便可：

mui.init({
    subpages:[{
      url:pullrefresh-subpage-url,//下拉刷新內容頁面地址
      id:pullrefresh-subpage-id,//內容頁面標誌
      styles:{
        top:subpage-top-position,//內容頁面頂部位置,需根據實際頁面佈局計算，若使用標準mui導航，頂部默認爲48px；
        .....//其它參數定義
      }
    }]
  });

經過mui.init方法中pullRefresh參數配置下拉刷新各項參數，以下：

mui.init({
  pullRefresh : {
    container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
    down : {
      height:50,//可選,默認50.觸發下拉刷新拖動距離,
      auto: true,//可選,默認false.自動下拉刷新一次
      contentdown : "下拉能夠刷新",//可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容
      contentover : "釋放當即刷新",//可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容
      contentrefresh : "正在刷新...",//可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容
      callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
    }
  }
});

下拉刷新是mui框架的一個插件，該插件目前有下拉刷新結束、滾動到特定位置兩個方法；

 

1下拉刷新結束

 在下拉刷新過程當中，當獲取新數據後，須要執行endPulldownToRefresh方法， 該方法的做用是關閉「正在刷新」的雪花進度提示，內容區域回滾頂部位置，以下：

 

function pullfresh-function() {
     //業務邏輯代碼，好比經過ajax從服務器獲取新數據；
     ......
     //注意，加載完新數據後，必須執行以下代碼，注意：若爲ajax請求，則需將以下代碼放置在處理完ajax響應數據以後
     mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
}

 

2滾動到特定位置

 在hello mui下拉刷新示例中，實現了雙擊標題欄，讓列表快速回滾到頂部的功能；代碼以下：

var contentWebview = null;
//監聽標題欄的雙擊事件
document.querySelector('header').addEventListener('doubletap',function () {
    if(contentWebview==null){
        contentWebview = plus.webview.currentWebview().children()[0];
    }
    //內容區滾動到頂部
    contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)");
});

 

3更改下拉刷新文字位置

 根據實際需求在父頁面給mui-content設置top屬性

.mui-bar-nav ~ .mui-content .mui-pull-top-pocket{
  top: 180px !important;
}

 

下拉加載

 

mui的上拉加載和下拉刷新相似，都屬於pullRefresh插件，使用過程以下：

• 一、頁面滾動到底，顯示「正在加載...」提示（mui框架提供）
• 二、執行加載業務數據邏輯（開發者提供）
• 三、加載完畢，隱藏"正在加載"提示（mui框架提供）

開發者只需關心業務邏輯，實現加載更多數據便可。

 

1初始化

 初始化方法相似下拉刷新，經過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從服務器獲取新數據；
    }
  }
});

 

2結束上拉加載

 加載完新數據後，須要執行endPullupToRefresh()方法，結束轉雪花進度條的「正在加載...」過程

function pullfresh-function() {
     //業務邏輯代碼，好比經過ajax從服務器獲取新數據；
     ......
     //注意：
     //一、加載完新數據後，必須執行以下代碼，true表示沒有更多數據了：
     //二、若爲ajax請求，則需將以下代碼放置在處理完ajax響應數據以後
     this.endPullupToRefresh(true|false);
}

 

3重置上拉加載

 若部分業務中，有從新觸發上拉加載的需求（好比當前類別已無更多數據，但切換到另一個類別後，應支持繼續上拉加載），此時調用.refresh(true)方法，可重置上拉加載控件，以下代碼：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數；
//注意：refresh()中需傳入true
mui('#pullup-container').pullRefresh().refresh(true);

 

4禁用上拉刷新

 在部分場景下但願禁用上拉加載，好比在列表數據過少時，不想顯示「上拉顯示更多」、「沒有更多數據」的提示語，開發者能夠經過調用disablePullupToRefresh()方法實現相似需求，代碼以下：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數；
mui('#pullup-container').pullRefresh().disablePullupToRefresh();

 

5啓用上拉刷新

 使用disablePullupToRefresh()方法禁用上拉加載後，可經過enablePullupToRefresh()方法再次啓用上拉加載，代碼以下：

//pullup-container爲在mui.init方法中配置的pullRefresh節點中的container參數；
mui('#pullup-container').pullRefresh().enablePullupToRefresh();