mui的下拉刷新和上拉加載

代碼定義：

var refresh = function(){
    mui.init({
        pullRefresh : {
            container:'#refreshContainer',//下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
            down : {
                height:50,//可選,默認50.觸發下拉刷新拖動距離,
                auto: false,//可選,默認false.自動下拉刷新一次
                contentdown : "下拉可以刷新",//可選，在下拉可刷新狀態時，下拉刷新控件上顯示的標題內容
                contentover : "釋放立即刷新",//可選，在釋放可刷新狀態時，下拉刷新控件上顯示的標題內容
                contentrefresh : "正在刷新...",//可選，正在刷新狀態時，下拉刷新控件上顯示的標題內容
                callback : function() { //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據
                  /*
 　　　　　　　　　　　　...
                    clock_data.content();
　　　　　　　　　　　　*/
                    mui('#refreshContainer').pullRefresh().refresh(true);
                    mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
                }
            },
            up : {
                height:50,//可選.默認50.觸發上拉加載拖動距離
                auto:false,//可選,默認false.自動上拉加載一次
                contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
                //contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
                callback : function(){  //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
                    /*...*/
                    mui('#refreshContainer').pullRefresh().refresh(true);
                    mui('#refreshContainer').pullRefresh().endPullupToRefresh();
                }
            }
        }
    });
}

//執行

refresh （）；

1、下拉刷新

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 :function //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據； } } });

刷新比較簡單，在一個頁面中的不同類目之間，在上拉之后到另一個類目時，可以執行

mui('#pullrefresh').pullRefresh().scrollTo(0,0,0)
使滾動列表跳到頂部。

2、上拉加載

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

（1）加載完新數據后，是否還有更多數據；若還有更多數據，則傳入false; 否則傳入true，之后滾動條滾動到底時，將不再顯示“上拉顯示更多”的提示語，而顯示“沒有更多數據了”的提示語。

　　　　mui('#refreshContainer').pullRefresh().endPullupToRefresh(false);

（2）在一個頁面的不同類目之間切換時，特別是在經過上拉加載之后，重置加載尤為重要，否則可能將出現上拉不動的bug：

　　　　mui('#refreshContainer').pullRefresh().refresh(true);

 

補充：
1.禁用上拉加載：mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
2.啟用上拉加載：mui('#refreshContainer').pullRefresh().enablePullupToRefresh();