无限滚动效果不佳

问题描述 投票:2回答:1

我尝试使用Infinite Scroll(https://infinite-scroll.com/),所以我准备了jquery-3.2.1.min.jsinfinite-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
3
4

但实际结果是

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

有什么错误吗?我无法理解无限卷轴所以可能有愚蠢的错误。

javascript jquery infinite-scroll
1个回答
1
投票

我无法确定,因为您没有提供任何细节,但我认为可能发生这种情况的主要原因是您尝试加载.php文件而没有服务器端应用程序提供文件。

我真的不知道插件是如何工作的,但如果你在本地运行该文件,它有可能在没有被解释器处理的情况下获得原始PHP代码,这很可能会导致控制台日志中显示错误。

快速解决这个问题的方法是运行一个合适的PHP服务器,或者如果你愿意的话,用HTML文件替换PHP文件(PHP的新程序员有时会认为他们所有的文件都必须被称为PHP,而事实并非如此;因为PHP本身只是一个预处理器而不是编程语言,你可以根据该页面的内容是否是动态的,与HTML和PHP文件进行交互。这不能用其他“更好”的语言来完成,比如Python,服务器具有用于提供响应的不同模型,并且必须将所有模板作为来自控制器的视图调用。

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

  1. 删除display:none;,官方文档并没有说它有必要正常工作。
  2. 检查插件文件是否在浏览器中正确加载。
  3. 为jQuery做同样的事情。
© www.soinside.com 2019 - 2024. All rights reserved.