辗转用mui做了两个项目，空下来把mui上拉加载更多，下拉刷新数据做了一个简单的封装，希望可以帮助到需要的朋友
demo项目的结构
直接贴代码了
index.html
mui上拉刷新下拉加载都这里了，两个方法搞定
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <title>mui上拉刷新下拉加载demo--封装</title> <script src="/UploadFiles/2021-04-02/mui.min.js">
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>总结
以上所述是小编给大家介绍的mui上拉加载更多下拉刷新数据的封装过程，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
