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插件，使用過程如下：

• 1、頁面滾動到底，顯示“正在加載...”提示（mui框架提供）
• 2、執行加載業務數據邏輯（開發者提供）
• 3、加載完畢，隱藏"正在加載"提示（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從服務器獲取新數據；
     ......
     //注意：
     //1、加載完新數據后，必須執行如下代碼，true表示沒有更多數據了：
     //2、若為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();