目录
一、上拉加载和下拉刷新
1. 介绍
mui的上拉加载和下拉刷新类似,都属于pullRefresh
插件,使用过程如下:
- 1、页面滚动到底,显示“正在加载...”提示(mui框架提供)
- 2、执行加载业务数据逻辑(开发者提供)
- 3、加载完毕,隐藏"正在加载"提示(mui框架提供)
- 4、没有更多数据加载时,结束加载,显示"没有更多数据了..."
开发者只需关心业务逻辑,实现加载更多数据即可。
2. 初始化
创建初始化容器:快捷方式:mrefreshContainer
<!--下拉刷新容器-->
<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
<div class="mui-scroll">
<!--数据列表-->
<ul class="mui-table-view mui-table-view-chevron">
</ul>
</div>
</div>
通过mui.init方法中pullRefresh参数配置上拉加载各项参数:
mui.init({
pullRefresh : {
container:'#refreshContainer',
down : { //下拉刷新数据
callback :pulldownRefresh //调用的方法
},
up : { //上拉加载更多
callback :pullupRefresh //调用的方法
}
}
});
其他初始化配置参数请参考:上拉加载 · MUI
3. 方法定义
下拉刷新:
function pulldownRefresh(){
//业务逻辑代码,比如通过ajax从服务器获取新数据;
//注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax