【下拉刷新】WEUI下拉刷新

最新推荐文章于 2024-02-18 14:51:51 发布

weixin_30602505

最新推荐文章于 2024-02-18 14:51:51 发布

阅读量1k

点赞数

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/sangwl/p/8830990.html

版权

最近在做手机版使用到了下拉刷新和滚动加载，记录一下实现过程：

一、引入文件

 
     
          <link rel= 
          "stylesheet"  
          href= 
          "Content/jqueryweui/weui.min.css" 
          > 
         
 
          <link rel= 
          "stylesheet"  
          href= 
          "Content/jqueryweui/jquery-weui.min.css" 
          > 
         
 
          <script type= 
          "text/javascript"  
          src= 
          "Content/jqueryweui/jquery.min.js"  
          ></script> 
         
 
          <script type= 
          "text/javascript"  
          src= 
          "Content/jqueryweui/jquery-weui.min.js" 
          ></script> 
         
 
   

二、页面布局

 
          <div  
          class 
          = 
          "content"  
          style= 
          " width: 100%;height:88%; margin-top:40px;margin-top: 45px;position: absolute; margin-bottom:45px;padding:0px; overflow: hidden;" 
          > 
         
          <div  
          class 
          = 
          "list-main-mian weui-form-preview infinite weui-pull-to-refresh"  
          id= 
          "listwrap"  
          style= 
          "height:100%; margin-top: 1px;overflow:auto;  z-index: 1" 
          > 
         
          <!--下拉刷新--> 
         
          <div  
          class 
          = 
          "weui-pull-to-refresh__layer"  
          style= 
          "padding: 5px;" 
          > 
         
          <div  
          class 
          = 
          "weui-pull-to-refresh__arrow" 
          ></div> 
         
          <div  
          class 
          = 
          "weui-pull-to-refresh__preloader" 
          ></div> 
         
          <div  
          class 
          = 
          "down" 
          >下拉刷新</div> 
         
          <div  
          class 
          = 
          "up" 
          >释放刷新</div> 
         
          <div  
          class 
          = 
          "refresh" 
          >正在刷新</div> 
         
          </div> 
         
          <div  
          class 
          = 
          "weui-form-preview"  
          id= 
          "Tolist" 
          > 
         
          <!--内容展示区域--> 
         
          </div> 
         
          <div  
          class 
          = 
          "weui-loadmore"  
          style= 
          "padding-bottom:30px;height:20px" 
          > 
         
          <i  
          class 
          = 
          "weui-loading" 
          ></i> 
         
          <span  
          class 
          = 
          "weui-loadmore__tips" 
          >正在加载</span> 
         
          </div> 
         
          </div> 
         
          </div>

三、js部分

 
         var  
         pages = 1; 
        
         var  
         sizes = 4; 
        
         var  
         loading =  
         false 
         ;   
         //状态标记 
        
         $(function () { 
        
         loadlist(); 
        
         }) 
        
         //=========================下拉刷新 
        
         $( 
         "#listwrap" 
         ).pullToRefresh(). 
         on 
         ( 
         "pull-to-refresh" 
         , function () { 
        
         setTimeout(function () { 
        
         pages = 1; 
        
         $( 
         "#Tolist" 
         ).html( 
         "" 
         ); 
        
         loadlist(); 
        
         if  
         (loading) loading =  
         false 
         ; 
        
         $( 
         "#listwrap" 
         ).pullToRefreshDone();  
         // 重置下拉刷新 
        
         }, 1500);    
         //模拟延迟 
        
         }); 
        
         //============================滚动加载 
        
         $( 
         "#listwrap" 
         ).infinite(). 
         on 
         ( 
         "infinite" 
         , function () { 
        
         if  
         (loading)  
         return 
         ; 
        
         loading =  
         true 
         ; 
        
         pages++;  
         //页数 
        
         $( 
         '.weui-loadmore' 
         ).show(); 
        
         setTimeout(function () { 
        
         loadlist(); 
        
         loading =  
         false 
         ; 
        
         }, 2500);    
         //模拟延迟 
        
         }); 
        
         // =======加载数据loadlist(); 
        
         function loadlist() { 
        
         var  
         html =  
         "" 
         ; 
        
         $.ajax({ 
        
         type:  
         "POST" 
         , 
        
         url:  
         "/Index/Index" 
         , 
        
         data: {  
         'page' 
         : pages,  
         'size' 
         : sizes }, 
        
         dataType:  
         "json" 
         , 
        
         error: function (request) { 
        
         $( 
         ".weui-loadmore" 
         ).hide();          
        
         html +=  
         "<div class=\"weui-cells__title\" >已无更多数据</div>" 
         ; 
        
         $( 
         "#Tolist" 
         ).append(html); 
        
         }, 
        
         success: function (data) { 
        
         if  
         (data.List.length > 0) { 
        
         for  
         ( 
         var  
         i = 0; i < data.List.length; i++) { 
        
         html +=  
         ' <div class="weui-form-preview__bd"> ' 
         ; 
        
         html +=  
         ' <div class="weui-form-preview__item"> ' 
         ; 
        
         html +=  
         ' <label class="weui-form-preview__label">'  
         + data.List[i].Name +  
         '</label> ' 
         ; 
        
         html +=  
         ' </div> ' 
         ; 
        
         html +=  
         ' </div> ' 
         ; 
        
         } 
        
         $( 
         "#Tolist" 
         ).append(html); 
        
         } 
        
         else  
         { 
        
         html +=  
         "<div class=\"weui-cells__title\" >已无更多数据</div>" 
         ; 
        
         $( 
         "#Tolist" 
         ).append(html); 
        
         loading =  
         true 
         ; 
        
         } 
        
         $( 
         ".weui-loadmore" 
         ).hide(); 
        
         } 
        
         }); 
        
         }