码迷,mamicode.com
首页 > Web开发 > 详细

Mui Webview下来刷新上拉加载实现

时间:2018-05-26 21:51:47      阅读:378      评论:0      收藏:0      [点我收藏+]

标签:font   监听事件   ade   settime   ror   业务   header   使用   str   

  有些事情经历过之后才会发现,原来再次之前我是如此的啥,因为是第一次做,毫无头绪,有时会想假如有个一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下来刷新上拉加载实现

标签:font   监听事件   ade   settime   ror   业务   header   使用   str   

原文地址:https://www.cnblogs.com/Can-daydayup/p/9094388.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!