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

Posted 2021-01-16 banyuege

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

          }
      });  
}