3

jQuery Mobile listviewで長いリストを処理する効果的な方法は何ですか? たとえば、1000 個のアイテムを一度に表示すると、ユーザーにとって実質的に役に立たなくなります。このような長いリストをスクロールすることを想像してみてください。

リストビューにカスタム ページングを実装することを考えています。独自のページング ソリューションを展開する以外に良い方法はありますか?

**更新以下のフィドルの例で私の更新された回答を確認してください

4

2 に答える 2

12

OK、独自の遅延読み込みリストビュー プラグインを作成することにしました。そして、それは本当に素晴らしいユーザー体験でした!

長いスクロールリストの解決策をまだ探している人へのヒントです。

- アップデート

使用したソース コードをインターネットに投稿することは許可されていないため、以前に例を投稿する時間がなかったことを残念に思います。ようやく自由になったので、遅延読み込みリストビューを再構築するために数時間を費やすことにしました (頭から離れたばかりです)。

脚本：

var per_page = 20; //max images per page
var page = 1; //initialize page number
$(document).ready(function () {
    loadFlckr(20, 1); //load some images onload
});

//Handler for scrolling toward end of document
$(window).scroll(function () {
    if ($(window).scrollTop() >= $(document).height() - $(window).height() - 100) {
        //End of page, load next content here
        if (!loading) loadNextPage();
    }
});

//Load content for next page
function loadNextPage() {
    loadFlckr(per_page, ++page);
}

//Load images from Datasource (Flickr in this case)
function loadFlckr(per_page, page) {
    loading = true; //interlock to prevent multiple calls
    $.mobile.loading('show');
    var flickerAPI = "http://api.flickr.com/services/rest/?method=flickr.people.getPublicPhotos&format=json&api_key=2fd4e1a42e243e332b7e334aa219698e&user_id=74038643@N00&jsoncallback=?";

    //Calling to service provider
    $.getJSON(flickerAPI, {
        per_page: per_page || 20,
        page: page || 1
    })
        .done(function (data) {
        $.each(data.photos.photo, function (i, item) {
            var url = String.format("http://farm{0}.staticflickr.com/{1}/{2}_{3}_{4}.jpg", item.farm, item.server, item.id, item.secret, 't');
            var img = $("<img/>").attr("src", url);
            var li = $("<li/>").append(img);
            var title = $("<h2/>").append(item.title || 'No Title');
            var desc = $("<p/>").append(item.owner);
            li.append(title);
            li.append(desc);
            //Append new list item to listview
            li.appendTo("#list-lazyloader");
        });
        //refresh listview
        $('#list-lazyloader').listview('refresh');
        loading = false;
        $.mobile.loading('hide');
        //Update page index
        page = data.photos.page;
        //Update photos count
        $('#photoCount').text($('#list-lazyloader li').size());
    });
};

//C#-like feature to concat strings
String.format = function () {
    var s = arguments[0];
    for (var i = 0; i < arguments.length - 1; i++) {
        var reg = new RegExp("\\{" + i + "\\}", "gm");
        s = s.replace(reg, arguments[i + 1]);
    }
    return s;
}

HTML:

<div data-role="header" data-position="fixed" data-theme="b">
     <h1>Photos (<span id="photoCount">0</span>)</h1>

</div>
<ul id="list-lazyloader" data-role="listview" data-theme="d"></ul>

そして、ここに作業フィドルがあります：

リストビューの遅延読み込み

楽しんでください=）

2017 年 1 月 8 日に更新: 一般の人がこのソリューションに関心を持っている場合に備えて、壊れた Flickr API を修正しました

于 2013-02-07T00:59:36.907 に答える
4

この解決策を試してください: https://github.com/stakbit/jQuery-Mobile-Listview-Pagination-Plugin (私はこのプラグインの開発者です)

これは単純な jquery モバイル リストビュー ページネーション プラグインであり、基本的にリストの最後に [Show More] ボタンを追加し (リスト アイテム数とラベル テキストは構成可能)、[Show More] ボタンがクリックされるたびに Ajax 呼び出しを行います。また、jquery モバイル検索入力ボックスを有効にして動作し、キャッシュも行います。

于 2013-03-24T16:56:46.633 に答える