手机端使用jquery weui制作ajax滚动加载更多。
演示地址：/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="/weui/1.1.1/style/weui.min.css"> <link rel="stylesheet" href="/jquery-weui/1.0.1/css/jquery-weui.min.css"> <script src="/jquery/1.11.0/jquery.min.js"></script> <script src="/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>
