ホームページ > バックエンド開発 > PHPチュートリアル > javascript - 手机web网站中怎么实现滚动条往下滑加载更多数据

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
リリース: 2016-06-06 20:12:24
オリジナル
1742 人が閲覧しました

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

回复内容:

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

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

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

$.ajax({
    ....//略
    success:function(data){
        $('body').append(data)//这个意思
    },
    ...
})
ログイン後にコピー

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

    $(window).scroll(function() {
        if ($(document).scrollTop() + $(window).height() > $(document).height() - 100) {
            $.get(url, function(data) {
                $('#list').append(data);
            });
        }
    });
ログイン後にコピー

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

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

関連ラベル:
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
PHP 拡張子 intl
から 1970-01-01 08:00:00
0
0
0
phpのデータ取得?
から 1970-01-01 08:00:00
0
0
0
PHP GET エラー レポート
から 1970-01-01 08:00:00
0
0
0
phpを上手に学ぶ方法
から 1970-01-01 08:00:00
0
0
0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート