1. 程式人生 > >MUI實現上拉刷新和下拉加載

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

poc 地址 回滾頂部 一次 特定 響應 問題 () roman

前 言

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();

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