有些事情经历过之后才会发现，原来再次之前我是如此的啥，因为是第一次做，毫无头绪，有时会想假如有个一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 = ;
//页码
var page = ;
//下拉刷新监听事件（这里可以直接去mui文档中复制）
mui.init({
pullRefresh: {
container: '#refreshContainer',
//下拉刷新
down: {
height: ,//可选,默认50.触发下拉刷新拖动距离,
auto:false,//可选,默认false.自动上拉加载一次
callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
//5毫秒显示
window.setTimeout(function () {
//向下刷新重新赋值
page = ;
size = ;
//调用获取数据的方法
DtGetData(size, page);
//结束向下加载数据的提示的重点
mui('#refreshContainer').pullRefresh().endPulldownToRefresh();
//最近发现的bug当每次重新向下刷新一次的时候总是会默认执行一次向下加载因此
//结束上拉加载endpulluptorefresh有更多数据传入false无则为true
//mui('#refreshContainer').pullRefresh().endPullupToRefresh(true);
}, );
}
}, //END 下拉刷新
up: {
height: ,//可选,默认50.触发下拉刷新拖动距离,
auto:true,
contentrefresh: "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容
contentnomore: '没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容；
callback: function () {//必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
window.setTimeout(function () {
//调用加载更多数据的方法 DtGetData(size, page);
}, ); //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 = ; i < returnData.length; i++) {
$("#list").append("这里是绑定你在后台调取出来的数据");
}
//分页
var PageSize;
//获取总页数
if ((data.Total % size) > ) {
PageSize = (data.Total / size) + ;
}
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>
效果图：
