dropload 下拉刷新

最新推荐文章于 2024-03-22 09:59:56 发布

康耶

最新推荐文章于 2024-03-22 09:59:56 发布

阅读量434

点赞数

CC 4.0 BY-SA版权

分类专栏：网页文章标签：下拉刷新

本文链接：https://blog.youkuaiyun.com/qwer492915298/article/details/88572743

网页专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用jQuery插件Dropload实现网页无限滚动加载的方法，通过AJAX请求获取数据并动态追加到页面中，实现了平滑的滚动体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

$(function(){
      //文件为位置
        var cont = 'json/aa.txt';
    // 页数
    var page = 0;

    // dropload
    $('.content').dropload({
        scrollArea : window,
        loadDownFn : function(me){
            page++;
            // 拼接HTML
            var result = '';
            $.ajax({
                type: 'GET',
                url: cont,
                                dataType: 'String',
                                success: function(data){
                    var arrLen = data.length;
                    if(arrLen > 0){
                        for(var i=0; i<1; i++){
                            result +=  data;
                                                        console.log(page);
                        }
                    // 如果没有数据
                    }else{
                        // 锁定
                        me.lock();
                        // 无数据
                        me.noData();
                    }
                    // 为了测试，延迟1秒加载
                    setTimeout(function(){
                        // 插入数据到页面，放到最后面
                        $('.lists').append(result);
                        // 每次数据插入，必须重置
                        me.resetload();
                    },1000);
                },
                error: function(xhr, type){
                    alert('Ajax error!');
                    // 即使加载出错，也得重置
                    me.resetload();
                }
            });
        }
    });
});