javascript - 手机web网站中怎么实现滚动条往下滑加载更多数据

Question

各位大神们下午好，我想在我的手机网站中添加跟新浪微博APP滚动条往下滑动加载更多数据功能，这个功能要怎么实现，请各位大神指点下我,有什么好的代码分享下，万分的感谢

Answer 1

这种模式叫做 Infinite Scroll， 各种框架和类库中都有比较成熟的实现，可以参考一下

Answer 2

思路很简单（其实实现也很简单），就是ajax后台请求数据，插入到文档后面，至于事你后台渲染好的html字符串还是后端之提供数据然后js进行渲染就无所谓

$.ajax({
    ....//略
    success:function(data){
        $('body').append(data)//这个意思
    },
    ...
})

Answer 3

可以监视滚动条事件，距离底部100px就开始加载

    $(window).scroll(function() {
        if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) {
            $.get(url, function(data) {
                $('#list').append(data);
            });
        }
    });

Answer 4

监听滚动事件，在回调函数里加载更多图片

Answer 5

用iScroll.js配合ajax请求数据可以实现上拉加载，下拉刷新，可以试一试。