zoukankan      html  css  js  c++  java

  • 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>  
  • 相关阅读:
    我对IOC控制反转，依赖注入原理的理解
    .net带事件的对象BinaryFormatter 序列化失败
    （维权成功，链接已经被删除了）如何防止自己的原创文章被垃圾站IT165采集和盗用
    浅谈.net多线程机制
    给现下流行的打车软件的一点小建议
    C#应用MemoryStream提高File读取速度
    微软真的要抛弃Silverlight了吗？
    C# File.Copy 实现磁盘间文件备份
    遮罩層 日曆效果
    GridView導出Excel
  • 原文地址：https://www.cnblogs.com/jpfss/p/9177242.html
Copyright © 2011-2022 走看看