首頁 >後端開發 >php教程 >javascript - 手机web网站中怎么实现滚动条往下滑加载更多数据

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

WBOY
WBOY原創
2016-06-06 20:12:241610瀏覽

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

回复内容:

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

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

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

<code class="js">$.ajax({
    ....//略
    success:function(data){
        $('body').append(data)//这个意思
    },
    ...
})</code>

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

<code class="js">    $(window).scroll(function() {
        if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) {
            $.get(url, function(data) {
                $('#list').append(data);
            });
        }
    });</code>

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

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn