jquery weui ajax滚动加载更多

来源：互联网发布：卫生网络直报系统编辑：程序博客网时间：2024/06/05 15:49

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

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

代码：

<!DOCTYPE html>  <html lang="en">  <head>      <meta charset="UTF-8">      <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">      <title>滚动加载更多</title>      <link rel="stylesheet" href="http://cdn.bootcss.com/weui/1.1.1/style/weui.min.css">      <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-weui/1.0.1/css/jquery-weui.min.css">      <script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>      <script src="http://cdn.bootcss.com/jquery-weui/1.0.1/js/jquery-weui.min.js"></script>  </head>  <body>  <div id="list">    </div>  <div class="weui-loadmore">      <i class="weui-loading"></i>      <span class="weui-loadmore__tips">正在加载</span>  </div>  <script>      $(function () {         max=10,page=1;        //进入页面加载        load(page);          //滚动加载更多        var loading = false;  //状态标记        $(document.body).infinite().on("infinite", function() {              if(loading) return;              loading = true;              setTimeout(function() {                  page=page+1;                load(page);                loading = false;              }, 1000);   //模拟延迟          });          //ajax加载数据        function load(p) {              var url="http://123.56.119.1:3000/words/search";            var data={"offset":(p-1)*max,"limit":max}            $.get(url,data,function (res) {                if(res.data.length==0||res.data.length==res.num){                    //没有数据时                    $(document.body).destroyInfinite()                    $(".weui-loadmore").html('<div class="weui-loadmore weui-loadmore_line"> <span class="weui-loadmore__tips">暂无数据</span> </div>')                }                for(var i=0;i<res.data.length;i++){                    $("#list").append('<a href="javascript:void(0);" class="weui-media-box weui-media-box_appmsg">'                            +'<div class="weui-media-box__hd">'                            +'<img class="weui-media-box__thumb" src="http://123.56.119.1:3000/upload/'+res.data[i].image+'">'                            +'</div>'                            +'<div class="weui-media-box__bd">'                            +'<h4 class="weui-media-box__title">'+res.data[i].content+'</h4>'                            +'</div>'                            +'</a>')                }            })        }    })  </script>  </body>  </html>

阅读全文

1 1