我尝试使用Infinite 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
3
4
但实际结果是
1
2
Next page<-this is a link to index-2.php
有什么错误吗?我无法理解无限卷轴所以可能有愚蠢的错误。
我无法确定,因为您没有提供任何细节,但我认为可能发生这种情况的主要原因是您尝试加载.php文件而没有服务器端应用程序提供文件。
我真的不知道插件是如何工作的,但如果你在本地运行该文件,它有可能在没有被解释器处理的情况下获得原始PHP代码,这很可能会导致控制台日志中显示错误。
快速解决这个问题的方法是运行一个合适的PHP服务器,或者如果你愿意的话,用HTML文件替换PHP文件(PHP的新程序员有时会认为他们所有的文件都必须被称为PHP,而事实并非如此;因为PHP本身只是一个预处理器而不是编程语言,你可以根据该页面的内容是否是动态的,与HTML和PHP文件进行交互。这不能用其他“更好”的语言来完成,比如Python,服务器具有用于提供响应的不同模型,并且必须将所有模板作为来自控制器的视图调用。
如果你真的想从这里获得有用的帮助,请发布完整的文件和你得到的错误,如果有的话。此外,一些其他的想法是:
display:none;
,官方文档并没有说它有必要正常工作。