无限滚动效果不佳

Question

我尝试使用无限Scroll(https://infinite-scroll.com/)，所以我准备了jquery-3.2.1.min.js和infinite-scroll.pkgd.min.js。

然后我做了一个包含js文件和PHP文件的项目。文件树如下：

infscroll--index.php
          |
          -index-2.php
          |
          -js--
              |
              -infinite-scroll.pkgd.min.js
              |
              -jquery-3.2.1.min.js

文件内容如下：

index.php

<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>
        $('.article-feed').infiniteScroll({
            path: '.pagination__next',
            append: '.article',
            status: '.scroller-status',
            hideNav: '.pagination'
        });
    </script>
</head>
<body>
<div class="article-feed">
    <p class="article">1</p>
    <p class="article">2</p>
</div>
<div class="scroller-status">
    <div class="infinite-scroll-request loader-ellips">
    </div>
    <p class="infinite-scroll-last" style="display: none">End of content</p>
    <p class="infinite-scroll-error" style="display: none">No more pages to load</p>
</div>
<p class="pagination">
    <a class="pagination__next" href="index-2.php">Next page</a>
</p>
</body>
</html>

索引-2.php

<html>
<head>
    <script src="js/jquery-3.2.1.min.js"></script>
    <script src="https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"></script>
    <script>
        $('.article-feed').infiniteScroll({
            path: '.pagination__next',
            append: '.article',
            status: '.scroller-status',
            hideNav: '.pagination'
        });
    </script>
</head>
<body>
<div class="article-feed">
    <p class="article">3</p>
    <p class="article">4</p>
</div>
<div class="scroller-status">
    <div class="infinite-scroll-request loader-ellips">
    </div>
    <p class="infinite-scroll-last" style="display: none">End of content</p>
    <p class="infinite-scroll-error" style="display: none">No more pages to load</p>
</div>

<p class="pagination">
    <a class="pagination__next" href="index-3.php">Next page</a>
</p>
</body>
</html>

我以为结果是这样的

但实际结果是

1
2
Next page<-this is a link to index-2.php

有没有错误？我无法理解无限滚动，所以可能会有愚蠢的错误。

Answer 1

我不能确定，因为你没有提供任何细节，但我认为发生这种情况的主要原因是你试图在没有服务器端的情况下加载 .php 文件提供文件的应用程序。

我真的不知道这个插件是如何工作的，但是如果你是运行本地文件，它可能会得到未经解释器处理的原始 PHP 代码，这很可能会导致控制台日志中显示的错误。

对此的快速修复是运行合适的 PHP 服务器，或者如果您愿意，用 HTML 文件替换 PHP 文件（新程序员PHP 的人有时认为他们所有的文件都必须调用 PHP，但事实并非如此；因为 PHP 只是一个预处理器，而不是一种编程语言本身，您可以与HTML 和 PHP 文件取决于该页面的内容是否是动态的。这不能用其他“更好”语言来完成，例如 Python]，其中服务器有不同的模型来提供响应，并且所有模板都必须作为来自控制器的视图来调用）。

如果您真的想从这里获得有用的帮助，请 post 完整的文件和您遇到的错误（如果有）。另外，还有一些其他的想法是：

去掉display:none;，官方文档没有说必须要正常使用
检查插件文件是否正确加载到您的浏览器中。
对 jQuery 执行相同的操作。

无限滚动效果不佳

infinite-scroll doesn't work well

javascript

jquery

infinite-scroll