1

我使用mansonry和 couchbase 作为数据库的无限滚动。我的问题是 tt 在第 2 页之后加载相同的内容：这是代码示例：

第 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 时，我可以使用下一个链接轻松单击 von Page 1 到 Page 2 到 Page 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”的评论是正确的。它将第二页的“1”替换为 2，第三页替换为 3，依此类推。

对于其他页面，它只会将元素插入到与“itemSelector”匹配的页面中。因此，例如，当无限滚动加载页面时，“容器” div 和 nav 元素将被完全丢弃。如果我们试图提供下一个导航元素，这是个坏消息。

在无限滚动中，您可以为“路径”设置一个选项，该选项需要一个函数（pageNumber）。如果未设置此选项，则当它尝试查找下一个路径时，它将使用上述逻辑（将“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 回答