引入相关依赖包

<!-- 1. 引入mui的CSS文件 -->
<link rel="stylesheet" href="lib/mui/css/mui.css">
<!-- 5. 引入mui的js文件 -->
<script src="lib/mui/js/mui.js"></script>

HTML结构

<!--下拉刷新容器-->
<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
 <div class="mui-scroll">
 <!--数据列表-->
 <ul class="mui-table-view mui-table-view-chevron">
 </ul>
 </div>
</div>

初始化代码

上拉和下拉配置都在里面，都有详细注释，初始化完成就可以上拉和下拉了，这里有两个必须的回调方法，用来处理具体业务逻辑，每个人具体需求不一样，这里就以自己的一个需求作为示例：

上拉和下拉配置都在里面，都有详细注释，初始化完成就可以上拉和下拉了，这里有两个必须的回调方法，用来处理具体业务逻辑，每个人具体需求不一样，这里就以自己的一个需求作为示例：

说明一下，我这里是重新刷新一页的数据，也可以刷新已经加载出来的数据，数据获取完成后结束刷新就行了。另外这个action返回的是子页面的整个HTML标签代码，所以就直接append到对应的ul下面就可以了，不用使用模板引擎拼接了。

加载更多业务处理方法：

如果拉完已经是最后一页，上拉就会关闭，下面的提示文字会变成类似'没有更多数据'这样的，使用起来还是挺简单的。

把页面放在微信浏览器的时候，测试到一个现象，从列表页面进入详情然后再返回的时候，页面会自动刷新，这个时候需要重置上拉，不然就拉不动了，当然其它情况，比如有tab切换的时候也需要重置上拉刷新：

关键代码就是有注释那一句，这里设置了一个延迟，不然刷新的时候会触发两次上拉，这可能是mui的一个bug，加上这个延迟反复测试过就没这个现象了。

上拉加载效果: