1、引入mui控件的js文件和css样式文件
<link rel="stylesheet" href="css/mui.min.css">
<script src="js/mui.min.js"></script>
2、完善列表容器:.mui-scroll-wrapper为滚动容器,.mui-scroll为滚动主体,里边内容不限。
<div id="pullrefresh" class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">data</li>
<li class="mui-table-view-cell">data</li>
</ul>
</div>
</div>
3、初始化mui控件:初始化会生成部分mui需要用到的控件,给容器和列表绑定事件。
mui.init({
pullRefresh : {
swipeBack: false, //关闭左滑关闭功能
container:"#refreshContainer",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等
down : {
style:'circle',//必选,下拉刷新样式,目前支持原生5+ ‘circle’ 样式
color:'#2BD009', //可选,默认“#2BD009” 下拉刷新控件颜色
height:'50px',//可选,默认50px.下拉刷新控件的高度,
range:'100px', //可选 默认100px,控件可下拉拖拽的范围
offset:'0px', //可选 默认0px,下拉刷新控件的起始位置
auto: true,//可选,默认false.首次加载自动上拉刷新一次
callback :pulldownRefresh //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据;
},
up:{
contentrefresh: '正在加载...',
contentnomore:'没有更多数据了',
callback:pulluploading //上拉加载下一页
}
});
4、定义下拉刷新列表方法 pulldownRefresh()
mui.ajax("请求url", {
type: "get",
dataType: "json",
data:{
param:param,
name:name
},
success: function(data){
//将获取到的数据动态赋值给列表,假设scroller为滚动容器
//如果数据不到一页,显示“没有更多数据了”,关闭上拉功能
//scroller.endPullupToRefresh(true);
//scroller.querySelector(".mui-pull-bottom-pocket .mui-pull-caption").innerHTML = "没有更多数据了";
//如果对于关闭的上拉功能,可以通过以下语句重置上拉加载功能。
//mui('#pullrefresh').pullRefresh().refresh(true);
}
});
5、定义上拉加载功能:pulluploading()该方法同下拉刷新相似。(最后一页关闭上拉加载、提示没有数据参考下拉刷新。)
6、多页数据提示:列表下方提示及下拉刷新效果
尾页页面效果:scroller.endPullupToRefresh(true);