有些事情经历过之后才会发现，原来再次之前我是如此的啥，因为是第一次做，毫无头绪，有时会想假如有个一demo就好了，那么就不会花费这么多的无用功了。今天使用mui 的webview实现了一个H5页面的上拉加载下拉刷新的效果，拿出来和大家一起分享一下，希望各位博友有用，当然啦有的时候坑会很多，但是只要我们学会用思考的方式去找问题，不管是什么问题我们都是可以解决的。小弟的文采不好，有错误请指出来，一定虚心接受
//首先在此之前我们先要引用jquery的插件，以及mui.js插件 <!--html代码--> <!--需要加载的容器--> <div class="shop-list font-16 col-1 mui-scroll-wrapper mui-content" id="refreshContainer"> <!--mui-scroll是否允许滑动--> <div class="mui-scroll"> <!--重点mui-table-view mui-table-view-chevron这里是页面加载那些的文字样式--> <ul class="mui-table-view mui-table-view-chevron" id="list"> </ul> </div> </div>
<!--MUIWEBvIEW分页--> <script type="text/javascript"> $(function () { //需要显示的条数 var size = 3; //页码 var page = 1; //下拉刷新监听事件（这里可以直接去mui文档中复制） mui.init({ pullRefresh: { container: '#refreshContainer',
//下拉刷新 down: { height: 50,//可选,默认50.触发下拉刷新拖动距离, auto:false,//可选,默认false.自动上拉加载一次 callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； //5毫秒显示 window.setTimeout(function () { //向下刷新重新赋值 page = 1; size = 3; //调用获取数据的方法 DtGetData(size, page);
//结束向下加载数据的提示的重点
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//最近发现的bug当每次重新向下刷新一次的时候总是会默认执行一次向下加载因此
//结束上拉加载endpulluptorefresh有更多数据传入false无则为true
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
}, 500); } }, //END 下拉刷新 up: { height: 50,//可选,默认50.触发下拉刷新拖动距离, auto:true, contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； window.setTimeout(function () { //调用加载更多数据的方法
DtGetData(size, page);
}, 500); //END 上拉加载 } } } }); //获取对应的数据 function DtGetData(a, b) { //mui展示数据的方法 mui.ajax("api接口", { data: { 'size': a, 'page': b }, dataType: 'json', type: 'post', headers: { 'Content-Type': 'application/json' }, success: function (data) { $("#list").html(""); //是否结束向上加载数据是传入false否传入true mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); //获取json格式的数据 var returnData = data.List; //html dom属性 var element = document.getElementById("list"); //html标签遍历 for (var i = 0; i < returnData.length; i++) { $("#list").append("这里是绑定你在后台调取出来的数据"); } //分页 var PageSize; //获取总页数 if ((data.Total % size) > 0) { PageSize = (data.Total / size) + 1; } else { //能整除 PageSize = (data.Total / size); } if (PageSize < page) { //当前显示数量大于总数时，停止上拉下拉结束转雪花进度条的“正在加载...”过程//停止下拉刷新（禁用上拉加载） mui('#refreshContainer').pullRefresh().disablePullupToRefresh();
//可以继续向上加载数据 mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); mui.toast("没有更多的数据") } else { page++; if (PageSize <page) {
mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); mui('#refreshContainer').pullRefresh().disablePullupToRefresh(); mui.toast("暂无更多数据"); } else { //有重新触发上拉加载的需求 mui('#refreshContainer').pullRefresh().refresh(true); }}}, error: function (xhr, type, errorThrown) { //异常处理； console.log(type); } })} //在方法为进行事件监听，在方法里面会叠加多次执行 //监听tap时间解决页面href超链接不跳转的问题 mui('body').on('tap', 'a', function () {
document.location.href = this.href;
}); //解决mui屏蔽点击事件的bug,通过添加对应控件的点击事件 mui("#refreshContainer").on('tap', '.kedianji', function (event)
{ this.click(); }); })
</script>
效果图：
