jquery weui ajax滚动加载更多

最新推荐文章于 2023-03-03 15:35:54 发布

转载最新推荐文章于 2023-03-03 15:35:54 发布 · 401 阅读

文章标签：

#javascript #ViewUI

本文介绍了一种使用jquery-weui实现手机端AJAX滚动加载更多的方法。通过设置状态标记来控制加载过程，并利用infinite插件实现滚动加载效果。同时，通过AJAX请求获取数据并动态更新页面。

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

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

代码：

[html] view plain copy

print ?

<!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>

<!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>