mui框架的地步选项卡公用加载对应页面demo
参考mui官网的下拉刷新地址：http://dev.dcloud.net.cn/mui/pulldown/
在HBuilder上新建：移动App--选择模板mui项目--
页面body里----主体mbody----区域滚动mScroll里---列表内容mList(注：直接敲出来的跟官网有所出入)或直接在官网粘贴（放主体里）
<!--主体 --> <div class="mui-content"> </div>
<!--下拉刷新容器--> <div id="refreshContainer" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron"> </ul> </div> </div>
js：
通过 mui.init 方法中 pullRefresh 参数配置下拉刷新各项参数，如下：
mui.init({ pullRefresh : { container:"#refreshContainer",//下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等 //下拉刷新 down : { height:50,//可选,默认50.触发下拉刷新拖动距离, auto: true,//可选,默认false.首次加载自动下拉刷新一次 contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } //下拉加载 up : { height:50,//可选.默认50.触发上拉加载拖动距离 auto:true,//可选,默认false.自动上拉加载一次 contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； callback :pullfresh-function //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； } } });
回调函数：操作ajax返回数据
完整案例：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>mui的下拉刷新上拉加载</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../css/mui.min.css"> <style> html, body { background-color: #efeff4; } .title { padding: 20px 15px 10px; color: #6d6d72; font-size: 15px; background-color: #fff; } </style> </head> <body> <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> <div class="mui-scroll"> <div class="title"> 这是subNView模式选项卡中的第1个子页面，该页面展示一个支持单webview模式的下拉刷新、上拉加载的消息列表 </div> <ul class="mui-table-view mui-table-view-chevron"> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 1</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 2</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 3</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 4</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 5</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 6</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 7</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 8</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 9</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 10</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 11</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 12</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 13</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 14</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 15</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 16</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 17</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 18</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 19</a> </li> <li class="mui-table-view-cell"> <a href="" class="mui-navigate-right">Item 20</a> </li> </ul> </div> </div> <script src="../js/mui.min.js"></script> <script> mui.init({ swipeBack: false, pullRefresh: { container: '#pullrefresh', down: { style:'circle', callback: pulldownRefresh }, up: { contentrefresh: '正在加载...', callback: pullupRefresh } } }); /** * 下拉刷新具体业务实现 */ function pulldownRefresh() { setTimeout(function() { var table = document.body.querySelector('.mui-table-view');//获取dom节点//获取选择器 var cells = document.body.querySelectorAll('.mui-table-view-cell'); for(var i = cells.length, len = i + 3; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; //下拉刷新，新纪录插到最前面； table.insertBefore(li, table.firstChild); }
//下拉刷新结束 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); //refresh completed mui.toast('下拉刷新成功'); }, 1000); } var count = 0; /** * 上拉加载具体业务实现 */ function pullupRefresh() { setTimeout(function() { mui('#pullrefresh').pullRefresh().endPullupToRefresh((++count > 2)); //参数为true代表没有更多数据了。 var table = document.body.querySelector('.mui-table-view'); var cells = document.body.querySelectorAll('.mui-table-view-cell'); for(var i = cells.length, len = i + 20; i < len; i++) { var li = document.createElement('li'); li.className = 'mui-table-view-cell'; li.innerHTML = '<a class="mui-navigate-right">Item ' + (i + 1) + '</a>'; table.appendChild(li); } }, 1000); } </script> </body> </html>
