mui上拉加载更多下拉刷新数据的封装过程(2)
代码就贴完了 就是看起来不是很好看
下面是效果图,想弄视频上来的 然后发现太鸡肋了 弄不上来 气死我了
PS:下面给大家分享一段示例代码:MUI 做上拉下拉加载更多数据小记
html代码
<div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div id="mui-scroll" class="mui-scroll"> <ul id="refresh-ul" class="mui-table-view"> <!-- 内容 --> </ul> </div> </div> <script type="text/javascript"> mui('body').on('tap','a',function(){document.location.href=this.href;});//监听让页面A标签的超链接 是有效状态 mui.init({ pullRefresh : { container:"#pullrefresh",//下拉刷新容器标识,querySelector能定位的css选择器均可,比如:id、.class等 up : { height:50,//可选,默认50.触发下拉刷新拖动距离, auto: true,//可选,默认false.自动下拉刷新一次 contentdown : "下拉可以刷新",//可选,在下拉可刷新状态时,下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选,在释放可刷新状态时,下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选,正在刷新状态时,下拉刷新控件上显示的标题内容 callback :function(){ //业务逻辑代码,比如通过ajax从服务器获取新数据; //注意,加载完新数据后,必须执行如下代码,注意:若为ajax请求,则需将如下代码放置在处理完ajax响应数据之后 //mui('#refresh-ul').pullRefresh().endPullupToRefresh(); //refresh completed var pagecount=$("#pagecount").val(); var page=$("#page").val(); pagecount=parseInt(pagecount); page=parseInt(page); page+=1; $.ajax({ url:"/mobile/seckill/order/order_refresh_ajax.jhtml", type: 'post', datatype:'html', data: {'pagecount': pagecount,'page':page}, async: false,//false代表只有在等待ajax执行完毕后才执行 success: function(data,msg){ $("#refresh-ul").append(data); $("#page").val(page); }, error: function(data,msg){ alert("error"); } }); this.endPullupToRefresh(false); } //必选,刷新函数,根据具体业务来编写,比如通过ajax从服务器获取新数据; } } }); if(mui.os.plus) { mui.plusReady(function() { setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 1000); }); } else { mui.ready(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }); } function goShoppingCart() { window.location.href = "/mobile/seckill/shoppingcart.jhtml"; } </script>
内容版权声明:除非注明,否则皆为本站原创文章。