mui ajax 上拉加载动画,MUI 之上滑刷新和下拉加载示例

1.首先要有下滑的元素  必须绑定有 mui 的  mui-scroll-wrapper样式   和一个容器标识

例如

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

Flag=true

}

mui('#refreshContainer').pullRefresh().endPulldown();

}

});

}