DCloud-MUI：下拉刷新、上拉加載

ylbtech-DCloud-MUI：下拉刷新、上拉加載

 

1. 下拉刷新返回頂部

0、

http://dev.dcloud.net.cn/mui/pulldown/

一、

概述

爲實現下拉刷新功能，大多數 H5 框架都是經過 DIV 模擬下拉回彈動畫，在低端 android 手機上，DIV 動畫常常出現卡頓現象（特別是圖文列表的狀況); mui 經過使用原生 webview 下拉刷新解決這個 DIV 動畫的卡頓問題，而且拖動效果更加流暢；

這裏提供兩種模式的下拉刷新，以適用不一樣場景：

單 webview 模式

• 效果展現：

• 動畫原理：

  下拉刷新時，觸發的是原生下拉刷新控件，而整個webview位置不會發生變化，因此不會在拖動過程當中發生DOM重繪，當控件拖動到必定位置觸發動態加載數據以及刷新操做。此模式下拉刷新，相比雙webview 模式，不建立額外 webview，性能更優。

• 使用方法：

  mui 初始化時設置pullRefresh各項參數，與雙 webview 模式的子頁面設置是同樣的。

  說明：

  1. DOM結構無特殊要求，只須要指定一個下拉刷新容器標識便可

  mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
   down : { style:'circle',//必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式
        color:'#2BD009', //可選，默認「#2BD009」 下拉刷新控件顏色
        height:'50px',//可選,默認50px.下拉刷新控件的高度,
        range:'100px', //可選 默認100px,控件可下拉拖拽的範圍
        offset:'0px', //可選 默認0px,下拉刷新控件的起始位置
        auto: true,//可選,默認false.首次加載自動上拉刷新一次
        callback :pullfresh-function //必選，刷新函數，根據具體業務來編寫，好比經過ajax從服務器獲取新數據；
   } } });

• 模式說明：

  • 優勢：
    
    • 性能更優，體如今兩點：
      1. 相比雙webview，不建立額外子 webview 性能消耗更少
      2. 下拉拖動過程當中不會發生重繪，也減小了性能消耗
  • 缺點：
    • 目前僅支持‘cricle’樣式以及該樣式的顏色自定義

雙 webview 模式

• 效果展現：

• 動畫原理：

  使用雙 webview 模式的下拉刷新，建立一個子 webview 添加列表；拖動時，拖動的是一個完整的 webview，避免了相似 DIV 拖動流暢度很差的問題，回彈動畫使用原生動畫；在 iOS 平臺，H5 的動畫已經比較流暢，故依然使用 H5 方案。兩個平臺實現雖有差別，但 mui 通過封裝，可以使用一套代碼實現下拉刷新。

• 使用方法：

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

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

  iOS平臺的下拉刷新，使用的是 mui 封裝的區域滾動組件， 爲保證兩個平臺的 DOM 結構一致，內容頁面需統一按照以下 DOM 結構構建：

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

  其次，經過 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從服務器獲取新數據；
   } } });

• 模式說明：

  • 優勢：
    
    • 可自定義下拉刷新樣式，更改文字等等.參考關於自定義下拉刷新樣式問答
  • 缺點：
    • 相比單 webview，性能消耗更大，不過都比 div 模式的要好用
    • DOM結構須要統一配置

• 滾動到特定位置

  下拉刷新組件滾動到特定位置的方法相似區域滾動組件

  目前僅支持 雙 webview 模式

  • scrollTo( xpos , ypos [, duration] )

    • xpos
      Type: Integer
      要在窗口文檔顯示區左上角顯示的文檔的 x 座標
    • ypos
      Type: Integer
      要在窗口文檔顯示區左上角顯示的文檔的 y 座標
    • duration
      Type: Integer
      滾動時間週期，單位是毫秒

  示例：在 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)"); });

• 更改下拉刷新文字位置

  *能夠解決修改下拉刷新子頁面默認top值後,下拉刷新提示框位置異常問題

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

  目前僅支持 雙 webview 模式

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

自動觸發下拉刷新

mui 支持設置首次加載時自動觸發一次下拉刷新，配置以下auto參數爲:true便可，上拉加載一樣支持此配置

mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器都可，好比：id、.class等
 down : { auto: true,//可選,默認false.首次加載自動下拉刷新一次
 }, up : { auto: true //可選,默認false.首次加載自動上拉加載一次
 } } });

下拉刷新結束

兩種模式在下拉刷新過程當中，當獲取新數據後，都須要執行 endPulldown 方法， 該方法的做用是關閉「正在刷新」的樣式提示，內容區域回滾頂部位置，以下：

function pullfresh-function() { //業務邏輯代碼，好比經過ajax從服務器獲取新數據；
 ...... //注意，加載完新數據後，必須執行以下代碼，注意：若爲ajax請求，則需將以下代碼放置在處理完ajax響應數據以後
     //沒有更多內容了，endPulldown 傳入true， 再也不執行下拉刷新
     mui('#refreshContainer').pullRefresh().endPulldown(); }

擴展閱讀

問答社區話題討論： 下拉刷新

代碼塊激活字符:    

mpull (DOM結構)

minitpull (初始化組件)

mmpull(組件方法)

二、

三、

2. 上拉加載返回頂部

0、

http://dev.dcloud.net.cn/mui/pullup/

一、

概述

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

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

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

初始化

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

結束上拉加載

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

• .endPullupToRefresh( nomore )

  • nomore
    Type:  Boolean
    是否還有更多數據；若還有更多數據，則傳入false; 不然傳入true，以後滾動條滾動到底時，將再也不顯示「上拉顯示更多」的提示語，而顯示「沒有更多數據了」的提示語；

示例：

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

重置上拉加載

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

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

禁用上拉刷新

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

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

啓用上拉刷新

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

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

 

擴展閱讀

• 一、上拉加載時，怎麼隱藏底部的「沒有更多數據了」?
• 二、問答社區話題討論：上拉加載

二、

3.返回頂部

 

4.返回頂部

 

5.返回頂部

 

 

6.返回頂部

 

7.返回頂部

 

8.返回頂部

 

9.返回頂部

 

10.返回頂部

 

 

11.返回頂部

 

12.返回頂部

 

13.返回頂部

 

14.返回頂部

 

15.返回頂部

 

 

16.返回頂部

 

做者：ylbtech 出處：http://ylbtech.cnblogs.com/ 本文版權歸做者和博客園共有，歡迎轉載，但未經做者贊成必須保留此段聲明，且在文章頁面明顯位置給出原文鏈接，不然保留追究法律責任的權利。