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