mui上拉刷新+下拉加载
具体操作见代码：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link href="css/mui.min.css" rel="stylesheet" />
</head>
<body>
<div class="mui-scroll-wrapper mui-content">
<div class="mui-scroll">
<ul class="mui-table-view" id="list">
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 1
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 2
</a>
</li>
<li class="mui-table-view-cell">
<a class="mui-navigate-right">
Item 3
</a>
</li>
</ul>
</div>
</div>
<script src="js/mui.min.js"></script>
<script type="text/javascript">
// var num=1
// mui.init({
// pullRefresh:{
// container:'mui-content',
// up:{
// auto:true,
// contentrefresh:'请稍后...',
// contentnomore:'没有数据了',
// callback:function(){
//// var list=document.getElementById("list");
//// for(var i=0;i>10;i++){
//// var li=document.createElement("li");
//// li.className='mui-table-view-cell';
//// list.appendChild(li);
//// num++
//// };
// setTimeout(function(){
// this.endPullToRefresh(true);
// }.bind(this),500)
// },
// }
// }
// });
//
//
var num=1
mui.init({
pullRefresh:{
container:".mui-content",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
//1.下拉刷新函数
down:{
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'red', //可选，默认“#2BD009” 下拉刷新控件颜色
// height:'50px',//可选,默认50px.下拉刷新控件的高度,
// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
//双webView多加下面三行，且mui('.mui-content').pullRefresh().endPulldownToRefresh();
//单webView:不加下面三行，且mui('.mui-content').pullRefresh().endPulldown();
contentdown:'下拉就可以刷新了',
contentover:'松开我就停止了',
contentrefresh:'正在加载...',
// callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
callback:function(){
var list=document.getElementById('list')
for(var i=1;i<=5;i++){
var li=document.createElement('li');
li.className='mui-table-view-cell';
li.innerHTML='Item'+num;
list.appendChild(li);
num++;
}
setTimeout(function(){
//设置在一定时间内隐藏刷新图标
mui('.mui-content').pullRefresh().endPulldownToRefresh();
},300);
}
},
//2.下拉加载函数
up:{
style:'circle',//必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
color:'red', //可选，默认“#2BD009” 下拉刷新控件颜色
// height:'50px',//可选,默认50px.下拉刷新控件的高度,
// range:'100px', //可选 默认100px,控件可下拉拖拽的范围
// offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
contentrefresh:'请稍后。。。',
contentnomore:'没有数据了',
// callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
callback:function(){
var list=document.getElementById('list')
for(var i=1;i<=5;i++){
var li=document.createElement('li');
li.className='mui-table-view-cell';
li.innerHTML='Item'+num;
list.appendChild(li);
num++;
}
//当num>15时停止下拉更新
setTimeout(function(){
if(num>=15){
this.endPullupToRefresh(true);
}else{
this.endPullupToRefresh(false);
}
}.bind(this),300);
}
}
}
});
</script>
</body>
</html>
