javascript - 选择性页面无限滚动

Question

我使用以下 JavaScript 在多个页面上实现了无限滚动，效果很好。

$(document).ready(function() {
  if ($('.pagination').length) {
    $(window).scroll(function() {
      var url = $('.pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

这位于我的 application.js 文件中。

我刚刚意识到我在其他页面上有一些分页链接，我不希望有无休止的滚动，但它们被替换为“请稍候...”

是否可以仅在某些页面或 Controller 上激活上述代码？

Answer 1

给你的will_paginate一个唯一的#id，这样他们就不会全部使用.pagination，这就是其他无尽滚动的原因正在附加“请稍候”。

示例:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, id: "posts_pagination"%>

在这里您还可以了解如何将 will_paginate 委托(delegate)给特定的 Controller 和操作。

will_paginate doesn't always play ball with adding an #id so you might want to try and add a .class instead:

<%= will_paginate @posts, :params => {:controller => 'posts', :action => 'index'}, class: "posts_pagination"%>

然后在您的 application.js 中 - 将 infinity-script 绑定(bind)到 #posts-pagination (如果 #id)或 .posts_pagination(如果.class)而不只是.pagination:

最喜欢的 我使用以下 javascript 在多个页面上实现了无限滚动，效果很好。

$(document).ready(function() {
  if ($('.posts-pagination').length) {
    $(window).scroll(function() {
      var url = $('.posts-pagination .next_page').attr('href');
      if (url && $(window).scrollTop() > $(document).height() - $(window).height() - 50) {
        $('.posts-pagination').text("Please Wait...");
        return $.getScript(url);
      }
    });
    return $(window).scroll();
  }
});

您可能需要根据您的具体情况为 url 提供一个唯一变量，以便每个无限滚动都不会获取另一个无限滚动的 url

只需更改 var url = $('.posts-pagination .next_page').attr('href');

至:

var url1 = $('.posts-pagination .next_page').attr('href');

var url2 = $('.comments-pagination .next_page').attr('href');

等等。

瞧。你可以走了。