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 （）；

一、下拉刷新

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)

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：

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

 

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