jquery weui ajax滚动加载更多

手机端使用jquery weui制作ajax滚动加载更多。

演示地址：http://wx.cnkfk.com/nuol/static/fpage.html

代码：

[html] view plain copy
 print?
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.     <meta charset="UTF-8">    
  5.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">    
  6.     <title>滚动加载更多</title>    
  7.     <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">    
  8.     <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">    
  9.     <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>    
  10.     <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>    
  11. </head>    
  12. <body>    
  13. <div id="list">    
  14.     
  15. </div>    
  16. <div class="weui-loadmore">    
  17.     <i class="weui-loading"></i>    
  18.     <span class="weui-loadmore__tips">正在加载</span>    
  19. </div>    
  20. <script>    
  21.     $(function () {   
  22.         max=10,page=1;  
  23.         //进入页面加载  
  24.         load(page);    
  25.         //滚动加载更多  
  26.         var loading = false;  //状态标记  
  27.         $(document.body).infinite().on("infinite", function() {    
  28.             if(loading) return;    
  29.             loading = true;    
  30.             setTimeout(function() {    
  31.                 page=page+1;  
  32.                 load(page);  
  33.                 loading = false;    
  34.             }, 1000);   //模拟延迟    
  35.         });    
  36.         //ajax加载数据  
  37.         function load(p) {    
  38.             var url="http://123.56.119.1:3000/words/search";  
  39.             var data={"offset":(p-1)*max,"limit":max}  
  40.             $.get(url,data,function (res) {  
  41.                 if(res.data.length==0||res.data.length==res.num){  
  42.                     //没有数据时  
  43.                     $(document.body).destroyInfinite()  
  44.                     $(".weui-loadmore").html('<div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暂无数据</span> </div>')  
  45.                 }  
  46.                 for(var i=0;i<res.data.length;i++){  
  47.                     $("#list").append('<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'  
  48.                             +'<div class="weui-media-box__hd">'  
  49.                             +'<img class="weui-media-box__thumb" src="http://123.56.119.1:3000/upload/'+res.data[i].image+'">'  
  50.                             +'</div>'  
  51.                             +'<div class="weui-media-box__bd">'  
  52.                             +'<h4 class="weui-media-box__title">'+res.data[i].content+'</h4>'  
  53.                             +'</div>'  
  54.                             +'</a>')  
  55.                 }  
  56.             })  
  57.         }  
  58.     })    
  59. </script>    
  60. </body>    
  61. </html>  

posted @ 2018-06-13 13:06  星朝  阅读(676)  评论(0)  编辑  收藏  举报