MUI实现上拉加载和下拉刷新

编写存储过程分页（此处使用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             }
webApi接口

 

页面实现

  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>
页面

 

 

 

改进的问题：当单次数的下拉刷新会自动触发上拉加载。比如：第一次进行下拉，就会自动触发上拉加载，但是第二次就没有。

　　　　　　

 

posted @ 2017-06-29 16:27  姜承轩  阅读(626)  评论(1)  编辑  收藏  举报