首页 » PHP笔记 » 手机端 jQuery ajax下拉自动加载数据

手机端 jQuery ajax下拉自动加载数据

高蒙 2016/06/18 14:18 3.4k浏览 0评论 PHP


由于项目紧张原先app的页面,比较复杂的现在都用html5代替。于是。我就上了。在写评论的模块的时候,涉及到下拉ajax加载评论数据,开始想着用什么插件之内。可是,刚好在项目中就有现成的代码。于是乎,我就拷贝过来,经过测试,可执行。

思路:
    这里实现的思路是这样的,只要用户滑动到页面的最底部,我们就实行加载数据。
    其实想想也是,页面都见底了,还不加载数据,非要等用户再去下拉干嘛呢。

下面是实现的代码:

var loadingdelay = false;  // 此处参数是判断是否重复的请求 避免数据多加载
$(window).on("scroll", function(event) {
    var h = $(document).height();
    var wh = $(window).height();
    if ($(window).scrollTop() >= h - wh - 100 && !loadingdelay) {
        loadingdelay = true;
        //发送Ajax
        var page = $('#ajax').attr('data');
        $.ajax({
            type: "POST",
            url:'/Community/chatAjax/',
            cache:false,
            data:{page:page},
            dataType:'html',
            success: function(data) {
                if(data.length){
                    $('#ajax').append(data);
                    page++;
                    $('#ajax').attr('data',page);
                    loadingdelay = false;
                }else{
                    loadingdelay = false;
                    return false;
                }
            }
        });

    }
});
// div 结构
<div class="ajax" data="2"></div>





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    481

    标签

    38

    热度

    10w+

    南京, 江苏, 中国

    人生要是没有理想, 那跟咸鱼有什么分别。