Question

我使用infinite-scroll with mansonry和couchbase作为数据库。我的问题是在第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 );
    });
  });

当我加载页面时显示

Page 1专栏1

Page 1专栏2

Page 1专栏3

- ＆GT;滚动

Page 2专栏4

Page 2专栏5

Page 2专栏6

- ＆GT;滚动

Page 2专栏7

Page 2专栏8

第9页

...

我的第一个想法是，第2页的下一个链接再次指向第2页。但是当我禁用inifinit-scroll时，我可以轻松地点击von Page 1到Page 2 to 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

我不知道问题是什么。

Answer 1

我花了一段时间来弄清楚这个问题，所以我发布了我的解决方案。

它使用第一页链接的注释，并假设其中有某种“page = 1”是正确的。对于第二页，它将2替换为“1”，将第三页替换为3，依此类推。

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

在无限滚动中，您可以为“path”设置一个选项，该选项需要一个函数（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 );
    });
  }
);

无限滚动在第2页后使用相同的内容（使用Couchbase作为DB）

1 个答案: