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