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

 PHP   高蒙   阅读(3128)   评论(17)   2016-06-18 14:18:55    手机端下拉加载数据 ajax下拉加载 


由于项目紧张原先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>





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

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


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客