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服务器，或者如果您愿意，请将PHP文件替换为HTML文件（PHP的新程序员有时会认为所有文件都必须被称为PHP，而实际上并非如此是的;因为PHP本身只是一个预处理器而不是编程语言，所以你可以根据该页面的内容是否是动态的，与HTML和PHP文件进行交互。这不能用其他的＆＃34; 更好地完成＆＃34; Python等语言，其中服务器具有不同的模型来提供响应，所有模板必须作为控制器的视图调用。）

如果你真的想从这里获得有用的帮助，请发布完整的文件和你得到的错误，如果有的话。此外，其他一些想法是：

删除display:none;，官方文档并未说明正常工作是必要的。
检查浏览器中是否正确加载了插件文件。
为jQuery做同样的事。

无限卷轴不能很好地工作

1 个答案: