编写存储过程分页（此处使用T-SQL）
1 CREATE PROC [dbo].[Common_PageList] 2 ( 3 @tab nvarchar(max),---表名 4 @strFld nvarchar(max), --字段字符串 5 @strWhere varchar(max), --where条件 6 @PageIndex int, --页码 7 @PageSize int, --每页容纳的记录数 8 @Sort VARCHAR(255), --排序字段及规则,不用加order by 9 @IsGetCount bit --是否得到记录总数，1为得到记录总数，0为不得到记录总数，返回记录集 10 ) 11 AS 12 declare @strSql nvarchar(max) 13 set nocount on; 14 if(@IsGetCount = 1) 15 begin 16 set @strSql='SELECT COUNT(0) FROM ' + @tab + ' WHERE ' + @strWhere 17 end 18 else 19 begin 20 set @strSql=' SELECT * FROM (SELECT ROW_NUMBER() 21 OVER(ORDER BY ' + @Sort + ') AS rownum, ' + @strFld + ' FROM ' + @tab + ' where ' + @strWhere + ') AS Dwhere 22 WHERE rownum BETWEEN ' + CAST(((@PageIndex-1)*@PageSize + 1) as nvarchar(20)) + ' and ' + cast((@PageIndex*@PageSize) as nvarchar(20)) 23 end 24 25 print @strSql 26 exec (@strSql) 27 28 set nocount off;
webApi接口（ADO.NET部分封装了，此处是调用形式）
1 /// 测试mui下拉刷新 2 /// </summary> 3 /// <param name="flag"></param> 4 /// <returns></returns> 5 [HttpPost] 6 public object test(JObject data) 7 { 8 9 using (var db = new DbBase()) 10 { 11 SqlParameter[] arr = { 12 new SqlParameter{ ParameterName="tab",Value=data["tab"].ToString()}, 13 new SqlParameter{ ParameterName="strFld",Value=data["strFld"].ToString()}, 14 new SqlParameter{ ParameterName="strWhere",Value=data["strWhere"].ToString()}, 15 new SqlParameter{ ParameterName="PageIndex",Value=Convert.ToInt32(data["PageIndex"])}, 16 new SqlParameter{ ParameterName="PageSize",Value=Convert.ToInt32(data["PageSize"])}, 17 new SqlParameter{ ParameterName="Sort",Value=data["Sort"].ToString()}, 18 new SqlParameter{ ParameterName="IsGetCount",Value=Convert.ToInt32(data["IsGetCount"])}, 19 }; 20 21 22 return RepositoryBase.ExecuteReader(db, "Common_PageList", arr); 23 24 25 }
页面实现
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="utf-8"> 6 <title>Hello MUI</title> 7 <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> 8 <meta name="apple-mobile-web-app-capable" content="yes"> 9 <meta name="apple-mobile-web-app-status-bar-style" content="black"> 10 11 <link rel="stylesheet" href="../css/mui.min.css"> 12 <style type="text/css"> 13 14 15 16 </style> 17 </head> 18 19 <body> 20 21 <header class="mui-bar mui-bar-nav"> 22 <h1 class="mui-title">下拉刷新（单webview模式）</h1> 23 </header> 24 25 <div id="pullrefresh" class="mui-content mui-scroll-wrapper"> 26 <div class="mui-scroll"> 27 28 <ul id="container" class="mui-table-view mui-table-view-chevron"></ul> 29 30 31 32 </div> 33 </div> 34 35 36 <ul id="temp" class="mui-table-view" style="display: none;"> 37 <li class="mui-table-view-cell"> 38 <a class="mui-navigate-right"> 39 @name 40 </a> 41 </li> 42 43 </ul> 44 45 46 47 48 49 <script src="../js/mui.js" type="text/javascript" charset="utf-8"></script> 50 <script> 51 52 53 54 /** 55 数据源分页参数对象 56 * */ 57 var obj={ tab:'SystemUsers', 58 strFld:'code,Username', 59 strWhere:'1=1', 60 PageIndex:1, 61 PageSize:10, 62 Sort:'Username', 63 IsGetCount:0, 64 pageCount:0 65 } 66 67 //webApi服务器接口 68 var apiUrl="http://192.168.200.114:8123/api/Common/Base/test"; 69 70 71 /** 72 * 定义数据源按什么html方式展示，动态生成html字符串的逻辑 73 **/ 74 var drawHtml=function(data){ 75 var html="" 76 for (var i=0;i<data.length;i++) 77 { 78 var temp=document.getElementById("temp").innerHTML; //模板 79 html+=temp.toString().replace('@name',data[i].Username); //替换参数叠加 80 } 81 82 return html; 83 } 84 85 86 87 mui.ready(function(){ 88 89 90 /** 91 MUI配置项 92 * */ 93 mui.init({ 94 pullRefresh: { 95 container: '#pullrefresh', 96 down: { 97 callback: pulldownRefresh 98 }, //END 下拉刷新 99 up : { 100 contentrefresh : "正在加载...",//可选，正在加载状态时，上拉加载控件上显示的标题内容 101 contentnomore:'没有更多数据了',//可选，请求完毕若没有更多数据时显示的提醒内容； 102 callback :pullupRefresh //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据； 103 } //END 上拉加载 104 } 105 }); 106 107 108 109 110 111 //统计：数据总数、分页总数 112 obj.IsGetCount=1; 113 loadData(apiUrl,obj,0); 114 115 //初始化列表数据（第一页） 116 obj.IsGetCount=0; 117 loadData(apiUrl,obj,0,"down",function(data){ 118 //此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式 119 return drawHtml(data); 120 121 }); 122 123 124 }); 125 126 127 128 129 /* 130 读取数据源 131 url：api地址 132 dataObj：数据源分页查询参数对象 133 Timeout：指定多少时间后绘制页面DOM展示对象， 134 动态生成的元素代码包含在一个setTimeout函数里， 135 用 setTimeout，主要对于下拉刷新间隔时间 136 loadType：加载方式：up(上拉加载)、down(上拉刷新) 137 drawFunction：回调函数，处理拿到数据源，绘制DOM展示界面的html 138 ，要接收返回的html字符串 139 * */ 140 141 var loadData=function(url,dataObj,Timeout,loadType,drawFunction){ 142 143 mui.ajax(url, { 144 type: "post", 145 data:dataObj, 146 async:false, 147 headers: {'Content-Type': 'application/json'}, 148 success: function(data) { 149 150 //统计出数据总数 151 if(dataObj.IsGetCount==1) 152 { 153 obj.pageCount=Math.ceil(parseInt(data[0].Column1)/obj.PageSize) ; 154 return; 155 } 156 157 setTimeout(function() { 158 159 //动态绘制出的Dom元素，结合数据展现 160 var html= drawFunction(data); 161 162 if(loadType=="up") //上拉加载 163 { 164 if(obj.PageIndex==obj.pageCount) 165 { 166 //参数为true代表没有更多数据了。 167 mui('#pullrefresh').pullRefresh().endPullupToRefresh(true); 168 } 169 else 170 { 171 mui('#pullrefresh').pullRefresh().endPullupToRefresh(); 172 } 173 174 //将下一页数据追加到容器 175 document.getElementById("container").innerHTML=document.getElementById("container").innerHTML+html; 176 } 177 else if(loadType=="down") //下拉刷新 178 { 179 // 该方法的作用是关闭“正在刷新”的样式提示，内容区域回滚顶部位置 180 mui('#pullrefresh').pullRefresh().endPulldownToRefresh(); 181 182 //将第一页数据覆盖到容器 183 document.getElementById("container").innerHTML=html; 184 185 //启用上拉加载 186 mui('#pullrefresh').pullRefresh().enablePullupToRefresh(); 187 188 } 189 190 191 192 193 194 195 }, Timeout);//END setTimeout(); 196 197 },//END success(); 198 199 error: function(xhr, type, errorThrown) { 200 console.log(type); 201 }//END error(); 202 203 });//END ajax(); 204 205 }//END loadData(); 206 207 208 209 210 211 212 213 /** 214 * 下拉刷新具体业务实现 215 */ 216 function pulldownRefresh() { 217 console.log('重置数据，初始到第一页'); 218 obj.PageIndex=1; 219 220 loadData(apiUrl,obj,1000,"down",function(data){ 221 //此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式 222 return drawHtml(data); 223 224 }); 225 226 } //END pulldownRefresh() 下拉刷新函数 227 228 229 230 231 232 /** 233 * 上拉加载具体业务实现 234 */ 235 function pullupRefresh() { 236 obj.PageIndex++;//当前页累加，加载下一页的数据 237 console.log("加载第："+obj.PageIndex+"页"); 238 console.log("页总数："+obj.pageCount); 239 240 loadData(apiUrl,obj,1000,"up",function(data){ 241 //此处实现动态绘制DOM的逻辑，根据数据源自行处理要展示的html方式 242 return drawHtml(data); 243 244 }); 245 246 247 } 248 249 250 251 </script> 252 </body> 253 254 </html>
改进的问题：当单次数的下拉刷新会自动触发上拉加载。比如：第一次进行下拉，就会自动触发上拉加载，但是第二次就没有。