单击视图中的更多链接时，使用ajax加载更多内容

我有一个自定义块视图。我显示最后5个节点标题。如果有人单击更多链接，我想在当前5个节点标题下加载接下来的5个标题。没有页面刷新，也没有寻呼机。这可能吗？我将如何去做呢？

因此，这是Drupal世界中许多人试图解决的问题之一。

我最近就这个完全相同的问题以及如何使用Drupal进行了介绍。可悲的是，我从未将幻灯片放到世界其他地方可以看到的任何地方。

这是模块的分解：

无限滚动

• 不适用于Views Ajax支持-围绕它进行破解以提出自己的ajax请求
• 发出整页请求-这是因为它不使用Views Ajax请求
• 需要Views 3.x-这是一个加号，因为该寻呼机可插入3.x

观看无限寻呼机

• 支持Views 2.x-这确实不是一件好事，因为传呼机不可插入
• 因为它可与2.x一起使用，所以它确实可以绕过寻呼机主题，常规视图ajax和预处理行为。因此，它破坏了某些功能。

最后但并非最不重要的一点是，我根据这个问题在其中添加了一个新项目。该项目的原因是，除了上面提到的问题之外，我还需要更多支持负载的视图，因此我们的项目无法接受。

视图加载更多

• 需要Views 3.x-这是故意的。
• 支持查看常规的寻呼机选项，例如偏移量，页数
• 完全支持view ajax功能
  • 如果在视图上启用了Ajax，则加载更多内容会将内容添加到列表的底部
  • 如果禁用了ajax，则页面将刷新并将旧内容替换为新内容
  • 在执行ajax回调时，它不会执行整页请求，它允许视图执行的是自然回调，而不是替换附加到其上的内容。
• 如果您使用的是航路点模块，则可以将视图配置为在用户滚动到页面底部时自动获取新内容。
• 支持JQuery效果（目前仅支持淡入淡出效果，更多信息即将推出）。

希望这能回答您的问题。这是我对所有视图加载更多模块的“公正” ;-)的看法。

在Drupal中使用https://github.com/paulirish/infinite-scroll的另一种方法是将任何Drupal寻呼机转换为自动寻呼机-无限滚动寻呼机-加载更多寻呼机。

步骤1

从https://github.com/paulirish/infinite-scroll下载jquery.infinitescroll.min.js 并将其放在/sites/all/themes/YOURTHEME/js/jquery.infinitescroll.min.js中。

第2步

将JavaScript文件添加到主题的.info文件。

第三步

制作一个包含以下代码的自定义JavaScript文件/sites/all/themes/YOURTHEME/js/YOURTHEME.js。

/**
 * Implementation of autopager @see https://github.com/paulirish/infinite-scroll
 * All views that have the "autopager" class will have an autopager
 */
Drupal.behaviors.viewsInfiniteScroll = function(context) {
  $(function(){
    var $container = $('div.autopager div.view-content');    
    $container.imagesLoaded( function(){
      $container.infinitescroll({
        navSelector  : 'div.autopager .pager',    // selector for the paged navigation
        nextSelector : 'div.autopager .pager-next a',  // selector for the NEXT link (to page 2)
        itemSelector : 'div.autopager .views-row',     // selector for all items you'll retrieve
        loading: {
          finishedMsg: 'No more pages to load.',
          img: '/sites/all/themes/YOURTHEME/images/loading.gif'
        }
      })
    })
  });
}

步骤4

添加无限滚动加载器的CSS

#infscr-loading {
  position: fixed;
  text-align: center;
  bottom: 300px;
  left: 42%;
  z-index: 100;
  background: white;
  background: hsla( 0, 0%, 100%, 0.9 );
  padding: 20px;
  color: #222;
  font-size: 15px;
  font-weight: bold;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

第5步

确保jquery版本高于1.7.1。使用http://drupal.org/node/1058168中描述的方法之一在Drupal中安装较新版本的jQuery。

我无法在第一个答案上添加评论。但是您应该添加新模块：https : //www.drupal.org/project/gd_infinite_scroll 此模块可让您将任何内容和寻呼机转换为无限滚动或加载更多寻呼机。

从模块页面：

提供一个使用无限滚动jQuery插件的管理：使用分页器在自定义页面上使用自动分页器。您可以使用滚动自动加载或加载更多按钮。