1

マンソンリーとカウチベースをデータベースとして無限スクロールを使用します。私の問題は、ページ 2 の後に tt が同じコンテンツをロードすることです。コード例を次に示します。

ページ1：

<div id="container">
   <div class="box">Page 1 Box 1</div>
   <div class="box">Page 1 Box 2</div>
   <div class="box">Page 1 Box 3</div>
</div>
<nav id="page-nav">
    <a href="link_to_page_2">Next/a>
</nav>

ページ2：

<div id="container">
   <div class="box">Page 2 Box 4</div>
   <div class="box">Page 2 Box 5</div>
   <div class="box">Page 2 Box 6</div>
</div>
<nav id="page-nav">
    <a href="link_to_page_3">Next/a>
</nav>

ページ 3:

<div id="container">
   <div class="box">Page 3 Box 7</div>
   <div class="box">Page 3 Box 8</div>
   <div class="box">Page 3 Box 9</div>
</div>
<nav id="page-nav">
    <a href="link_to_page_4">Next/a>
</nav>

Javascript:

var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
    }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true );
    });
  });

ページをロードすると表示されます

ページ 1 ボックス 1

ページ 1 ボックス 2

ページ 1 ボックス 3

->スクロール

ページ 2 ボックス 4

ページ 2 ボックス 5

ページ 2 ボックス 6

->スクロール

ページ 2 ボックス 7

ページ 2 ボックス 8

ページ 2 ボックス 9

..

私の最初のアイデアは、ページ 2 の次のリンクが再びページ 2 を指すというものでした。しかし、inifinit-scroll を無効にすると、次のリンクを使用して、ページ 1、ページ 2、ページ 3 などと簡単にクリックできます。

私はバックグラウンドで Couchbase を使用しており、次のリンクは次のようなものです ( pagination w couchbase ):

?startkey="Box3-key"&startkey_docid=Box3&skip=1&limit=3
?startkey="Box6-key"&startkey_docid=Box6&skip=1&limit=3
?startkey="Box9-key"&startkey_docid=Box9&skip=1&limit=3

何が問題なのかわかりません。

4

1 に答える 1

0

この問題を理解するのに時間がかかったので、解決策を投稿します。

最初のページからのリンクを使用し、その中に何らかの「page = 1」があると想定しているというコメントは正しいです。2 ページ目では「1」が 2 に、3 ページ目では 3 に、というように置き換えられます。

追加のページの場合、「itemSelector」に一致する要素のみがページに挿入されます。したがって、たとえば、「コンテナ」の div 要素と nav 要素は、無限スクロールによってページが読み込まれると完全に破棄されます。次の nav 要素を提供しようとしている場合、これは悪いニュースです。

無限スクロールでは、「パス」に設定できるオプションがあり、これには関数 (ページ番号) が必要です。このオプションが設定されていない場合、次のパスを見つけようとするときに、上記のロジックを使用します (「1」を現在のページに置き換えます)。ただし、このオプションを設定すると、この関数を使用して任意のパスを生成できます。

私がやったことは大まかに次のとおりです。

ページ1：

<div id="container">
   <div class="box">Page 1 Box 1</div>
   <div class="box">Page 1 Box 2</div>
   <div class="box">Page 1 Box 3</div>
</div>
<nav id="page-nav">
    <a href="link_to_page_2"></a>
</nav>

ページ2：

<div id="container">
   <div class="box">Page 2 Box 4</div>
   <div class="box">Page 2 Box 5</div>
   <div class="box">Page 2 Box 6</div>
</div>
<nav class="box">
    <a href="link_to_page_3"></a>
</nav>

ページ 3:

<div id="container">
   <div class="box">Page 3 Box 7</div>
   <div class="box">Page 3 Box 8</div>
   <div class="box">Page 3 Box 9</div>
</div>
<nav class="box">
    <a href="link_to_page_4"></a>
</nav>

Javascript:

var $container = $('#container');

$container.imagesLoaded(function(){
  $container.masonry({
    itemSelector: '.box',
    columnWidth: 100
  });
});

$container.infinitescroll({
  navSelector  : '#page-nav',    // selector for the paged navigation
  nextSelector : '#page-nav a',  // selector for the NEXT link (to page 2)
  itemSelector : '.box',     // selector for all items you'll retrieve
  loading: {
      finishedMsg: 'No more pages to load.',
      img: 'http://i.imgur.com/6RMhx.gif'
  },
  path: function(pageNumber) {
      // try to get path from most recent page
      var query = $('nav.box a:last');
      if (query.length > 0) {
          return query.attr('href');
      } else {
          // if none exist, use path from first page
          return $('#page-nav a:last').attr('href');
      }
  }
  },
  // trigger Masonry as a callback
  function( newElements ) {
    // hide new items while they are loading
    var $newElems = $( newElements ).css({ opacity: 0 });
    // ensure that images load before adding to masonry layout
    $newElems.imagesLoaded(function(){
      // show elems now they're ready
      $newElems.animate({ opacity: 1 });
      $container.masonry( 'appended', $newElems, true );
    });
  }
);
于 2013-08-27T11:51:44.870 に答える