mui点击加载，下拉刷新，上下整合代码
mui点击加载，下拉刷新，上下整合代码
mui的是上拉加载，但是老大说要做成点击加载，所以就改了一些
代码应该是有些问题的，测到了大家就自己改下。
首先要说明的是，有下拉刷新的页面一定要是双webview形式
不然就会出现下拉把上一个窗口的页面给拉出来的情况
父view：messages.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>消息</title> 8 <script src="../js/rem.js"></script> 9 <link href="../css/mui.min.css" rel="stylesheet" /> 10 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 11 <link rel="stylesheet" type="text/css" href="../css/page.css"/> 12 <link rel="stylesheet" type="text/css" href="../css/iconfont.css" /> 13 </head> 14 </head> 15 <body style="background: #fff;"> 16 <header class="mui-bar mui-bar-nav"> 17 <a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a> 18 <h1 class="mui-title">消息</h1> 19 </header> 20 <div class="mui-content"> 21 </div> 22 </body> 23 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script> 24 <script src="../js/mui.min.js"></script> 25 <script type="text/javascript" src="../js/benben.js" ></script> 26 <script type="text/javascript" src="../js/suyuan.js" ></script> 27 <script type="text/javascript" src="../js/common.js"></script> 28 <script> 29 //启用双击监听 30 mui.init({ 31 gestureConfig:{ 32 doubletap:true 33 }, 34 subpages:[{ 35 url:'messages2.html', 36 id:'messages2.html', 37 styles:{ 38 top: '48px', 39 bottom: '0px', 40 } 41 }] 42 }); 43 var contentWebview = null; 44 document.querySelector('header').addEventListener('doubletap',function () { 45 if(contentWebview==null){ 46 contentWebview = plus.webview.currentWebview().children()[0]; 47 } 48 contentWebview.evalJS("mui('#pullrefresh').pullRefresh().scrollTo(0,0,100)"); 49 }); 50 </script> 51 52 </html>
子webview：messages2.html
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 7 <title>消息</title> 8 <script src="../js/rem.js"></script> 9 <link href="../css/mui.min.css" rel="stylesheet" /> 10 <link rel="stylesheet" type="text/css" href="../css/style.css" /> 11 <link rel="stylesheet" type="text/css" href="../css/page.css"/> 12 <link rel="stylesheet" type="text/css" href="../css/iconfont.css" /> 13 </head> 14 </head> 15 <body style="background: #fff;"> 16 <div class="mui-loading" id="loading"> 17 <div class="mui-spinner"> 18 19 </div> 20 </div> 21 <div id="pullrefresh" class="mui-content" style="padding-bottom: 0;background: #fff;display: none;"> 22 <div class="message"> 23 <ul id="messagesList"> 24 25 </ul> 26 <div class="mui-text-center"> 27 </div> 28 29 <div class="mui-text-center"> 30 <div class="loadMore"> 31 点击加载更多 32 </div> 33 </div> 34 </div> 35 </div> 36 37 </body> 38 <script type="text/javascript" src="../js/jquery-1.10.2.min.js" ></script> 39 <script src="../js/mui.min.js"></script> 40 <script type="text/javascript" src="../js/benben.js" ></script> 41 <script type="text/javascript" src="../js/suyuan.js" ></script> 42 <script type="text/javascript" src="../js/common.js"></script> 43 <script> 44 $(function(){ 45 var message_list =$('.message'); 46 message_list.on('tap','li',function(e){ 47 if($(this).hasClass('on')){ 48 $(this).removeClass('on').find('.popover_article').hide(); 49 50 return false; 51 } 52 message_list.find('li').removeClass('on'); 53 message_list.find('.popover_article').hide(); 54 $(this).addClass('on').find('.popover_article').show(); 55 56 }) 57 }); 58 59 ca.init(); 60 61 mui.init({ 62 pullRefresh: { 63 container: '#pullrefresh', 64 down: {//下拉刷新 65 contentdown : "下拉可以刷新",//可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容 66 contentover : "释放立即刷新",//可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容 67 contentrefresh : "正在刷新...",//可选，正在刷新状态时，下拉刷新控件上显示的标题内容 68 callback: pulldownRefresh 69 } 70 71 } 72 }); 73 setTimeout(function() { 74 $('#loading').css('display','none'); 75 $('#pullrefresh').css('display','block'); 76 }, 800); 77 //点击加载 78 ca.click(ca.className('loadMore')[0],function(){ 79 if($('.loadMore').text() == '点击加载更多'){ 80 var loadStr = ''; 81 82 loadStr += '<div class="mui-loading" id="loading">'; 83 loadStr += '<div class="mui-spinner"></div></div>'; 84 $('.loadMore').html(loadStr); 85 setTimeout(function(){ 86 $('.loadMore').html('点击加载更多'); 87 },500); 88 pullupRefresh(); 89 } 90 }) 91 /* 92 * 下拉刷新具体业务实现 93 */ 94 function pulldownRefresh() { 95 setTimeout(function() { 96 pageIndex = 1;//刷新并显示第一页 97 type=1;//代表下拉刷新 98 getMessages(type);//具体取数据的方法 99 }, 500); 100 } 101 102 var pageIndex = 0; 103 pullupRefresh(); 104 function pullupRefresh() { 105 console.log(111); 106 setTimeout(function() { 107 pageIndex++;//翻下一页 108 type=2;//代表上拉加载 109 getMessages(type);//具体取数据的方法 110 }, 500); 111 } 112 function getMessages(type){ 113 ca.get({ 114 url:suyuan.url+'api/personal/notify/', 115 data:{ 116 pageIndex:pageIndex, 117 }, 118 succFn:function(data){ 119 console.log(data); 120 var data = JSON.parse(data); 121 if(data.code == 1){ 122 //遍历数据 123 var dataList = data.data; 124 dataList = JSON.parse(dataList); 125 var str = ''; 126 for(i in dataList){ 127 if(dataList.title != '' && dataList[i].content != null && dataList[i].content != undefined){ 128 str += '<li onclick="readed('+dataList[i].id+',this)">'; 129 str += '<div class="notice">'; 130 if(!dataList[i].read){ 131 str += '<span class="unread"></span>'; 132 } 133 str += '<span class="iconfont icon-icon-tips"></span></div>'; 134 str += '<div class="msg_text">'; 135 str += '<h4>'+dataList[i].title+'</h4>'; 136 if(dataList[i].content == null || dataList[i].content == undefined){ 137 dataList[i].content = ''; 138 } 139 str += '<p>'+dataList[i].content+'</p>'; 140 str += '<span class="time">15:31</span></div>'; 141 str += '<div class="popover_article">'+dataList[i].content; 142 str += '</div></li>'; 143 } 144 } 145 if(type == 1){ 146 //下拉加载 147 $('#messagesList').html(''); 148 $('#messagesList').append(str); 149 mui.currentWebview.show(); //显示当前页面 150 mui('#pullrefresh').pullRefresh().endPulldown(); 151 } 152 if(type==2){//上拉加载 153 $('#messagesList').append(str); 154 mui.currentWebview.show(); //显示当前页面 155 } 156 data.code = 2; 157 if(data.code == 1){ 158 $('.loadMore').html('点击加载更多'); 159 } else { 160 $('.loadMore').html('没有更多数据了'); 161 162 // mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); 163 } 164 mui.currentWebview.show(); //显示当前页面 165 if(data.status!=1&&pageIndex==1){ 166 mui.currentWebview.show(); //显示当前页面 167 } 168 }else{ 169 $('.loadMore').html('没有更多数据了'); 170 } 171 } 172 }); 173 174 } 175 if(mui.os.plus) { 176 mui.plusReady(function() { 177 setTimeout(function() { mui('#pullrefresh').pullRefresh().pullupLoading(); }, 800); 178 }); 179 } else { 180 mui.ready(function() { 181 mui('#pullrefresh').pullRefresh().pullupLoading(); 182 }); 183 } 184 185 function readed(id,self){ 186 $.ajax({ 187 type:'delete', 188 url:suyuan.url+'api/personal/notify/'+id, 189 contentType:'application/json', 190 dataType:'json', 191 success:function(data){ 192 if(data.code == 1){ 193 $(self).find('.unread').remove('.unread'); 194 } 195 }, 196 error:function(e){ 197 console.log(e.status); 198 } 199 }) 200 } 201 </script> 202 203 </html>
代码根据自己的需要自己调整即可
