1、导航条页面:
<header class="mui-bar mui-bar-nav"> <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a> <h1 class="mui-title">上拉刷新和下拉加载</h1> </header> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init({ swipeBack:true, subpages:[{ url:'my-customer-list.html', id:'my-customer-list', styles:{ top:45, bottom:0 } }] }) </script>2、子页面:
!--下拉刷新容器--> <div id="pullrefresh" class="mui-content"> <!--数据列表--> <ul class="mui-table-view mui-table-view-chevron customer-list"> <li class="mui-table-view-cell"> </li> </ul> </div> <script src="../js/mui.min.js"></script> <script type="text/javascript"> mui.init({ pullRefresh: { container: '#pullrefresh', down: { style:'circle', callback: pulldownRefresh }, up: { //auto:true, contentrefresh: '正在加载...', callback: pullupRefresh } } }); var count = 0; function pulldownRefresh() { //这里写刷新代码 mui.toast("下拉刷新"); mui('#pullrefresh').pullRefresh().endPulldownToRefresh(false); } function pullupRefresh() { //这里写加载代码 mui.toast("上拉加载更多"); mui('#pullrefresh').pullRefresh().endPullupToRefresh(false); //若还有更多数据,则传入false; 否则传入true,之后滚动条滚动到底时,将不再显示“上拉显示更多”的提示语,而显示“没有更多数据了”的提示语; } </script>我爱模板网在使用这个的时候,老是陷入一个固定思维,那就是既然可以上啦下拉,肯定需要用到mui的scroll区域拖拽滚动,就是那个外面套一个“<div class="mui-scroll-wrapper></div>”,里面套一个“<div class=" mui-scroll"=""></div>”,实际上不需要,只要使用了上拉刷新和下拉加载,滚动会自动加上。如果加上这个滚动,反而会和上拉刷新下拉加载冲突。
注(补充):
经测试,最好外面套一个“<div class="mui-scroll-wrapper></div>”,里面套一个“<div class=" mui-scroll"=""></div>”,否则在iPhone 6下,无法滚动。安卓和模拟器没问题。