有些事情经历过之后才会发现，原来再次之前我是如此的啥，因为是第一次做，毫无头绪，有时会想假如有个一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);}, 500);}}, //END 下拉刷新up: {height: 50,//可选,默认50.触发下拉刷新拖动距离,auto:true,contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容contentnomore: ‘没有更多数据了‘,//可选，请求完毕若没有更多数据时显示的提醒内容；callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；window.setTimeout(function () {DtGetData(size, page);$(".mui-spinner").hide();}, 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("");//开启数据加载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>
效果图：
Mui Webview下来刷新上拉加载实现
原文地址：https://www.cnblogs.com/Can-daydayup/p/9094388.html