MUI 之上滑刷新和下拉加載示例

1.首先要有下滑的元素  必須綁定有 mui 的  mui-scroll-wrapper樣式   和一個容器標識 

　　例如

　　　　

		<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
			<ul id="siteList">
			</ul> 
                </div>

2.然后就是配置 下拉和上滑組件的配置

			var Flag = false;
			mui.init({
			  pullRefresh : {
			    container:"#refreshContainer",//下拉刷新容器標識，querySelector能定位的css選擇器均可，比如：id、.class等
			    up : {
   				height:10,//可選.默認50.觸發上拉加載拖動距離
      				contentrefresh : "正在加載...",//可選，正在加載狀態時，上拉加載控件上顯示的標題內容
      				contentnomore:'沒有更多數據了',//可選，請求完畢若沒有更多數據時顯示的提醒內容；
			        auto: false,//可選,默認false.首次加載自動上拉刷新一次
			        callback :upperSkid //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
			    },down : {
				    style:'circle',//必選，下拉刷新樣式，目前支持原生5+ ‘circle’ 樣式
				    color:'#2BD009', //可選，默認“#2BD009” 下拉刷新控件顏色
				    height:'50px',//可選,默認50px.下拉刷新控件的高度,
				    range:'100px', //可選 默認100px,控件可下拉拖拽的范圍
				    offset:'0px', //可選 默認0px,下拉刷新控件的起始位置
				    auto: false,//可選,默認false.首次加載自動上拉刷新一次
				    callback :Refresh //必選，刷新函數，根據具體業務來編寫，比如通過ajax從服務器獲取新數據；
				}
			  } 
			});
			function Refresh(){
			　　Flag=false;
			   mui('#refreshContainer').pullRefresh().refresh(true);
			   resetData();
		　　　　　　setTimeout(function () {
                    　　　　　　getSiteData();
                　　　　　　}, 500);
                
			}
			function upperSkid(){
				//mui('#siteList').pullRefresh().endPullupToRefresh((Flag)); //參數為true代表沒有更多數據了。
				page=pagesize*indexNum;
				setTimeout(function () {
                   　　　　　　　　mui('#refreshContainer').pullRefresh().endPullupToRefresh((Flag)); //參數為true代表沒有更多數據了。
                    　　　　　　　　　　getSiteData();
               　　　　　　　　　　 }, 500);
			}

3.獲取數據 的接口

function getSiteData(){
	$.ajax({
           url: "url",
           type: "GET", 
	   data: {},
           dataType: "jsonp", //指定服務器返回的數據類型
           jsonp: 'callback',
           success: function (data) {
               var result = JSON.parse(data); //json對象轉成字符串
	       if(result.total>0){
		    siteListData=siteListData.concat(result.rows);
		    showData(siteListData);	   //渲染數據函數
	       }else{
		    siteListData=[];
		    showData(siteListData);	
		}
		if(Flag == false){
                    indexNum++;
                }  
		if(result.rows.length<pagesize){    //判斷  如果獲取數據的數量小於每頁查詢的數量  就說明沒有數據了
			Flag=true
		}
						
		mui('#refreshContainer').pullRefresh().endPulldown();

          }
      });  
}