无法安装无限滚动
花了几个小时尝试在博客中实现Infinite Scroll。目标很简单，主页面太长，我希望它逐步加载。插件的作者有一个完美工作的example，然而，无论我做什么，在我的例子中，插件都不能正常工作。我想我漏掉了什么。
如果我没理解错的话，那么这个插件的工作原理是这样的:我们在其中创建一个公共的div和文章。当进入一个页面时，用户会看到第一篇文章，当他向下滚动到下一篇文章时，页面会放大，并且已经显示了两篇文章，依此类推。这似乎就是我正在做的事情。
我试着通过链接附加它
<script src = "https://unpkg.com/infinite-scroll@3/dist/infinite-scroll.pkgd.min.js"> </ script>已尝试将文件上载到服务器
<script src = "js/infinite-scroll.pkgd.min.js"> </script>按照文档中的建议，我尝试通过jQuery、JavaScript和html来创建元素本身，但都没有成功。
这是我尝试实现它的站点的一个非常简单的页面的链接：https://dinarkino.ru/new。目前，所有段落都是一次性加载的，尽管每个段落都包装在单独的
<article class = "post"> ... </ article>
我将非常感谢您的帮助！
回答 1
Stack Overflow用户
发布于 2018-10-19 07:52:59
确保你是从http// address运行页面，如果你是从本地文件运行，无限滚动将不起作用。我使用node、npm和express设置了一个本地环境，如下所示…
var express = require("express");
var PORT = 8080;
var app = express();
app.use(express.static("public"))
app.listen(PORT, function(){
console.log("App listening on PORT: " + PORT)
})所以我的文件夹结构是这样的
. ├── node_modules │
├── public │ |── page1.html │ |__ page2.html │ |__ page3.html │ ├── server.js │
要加载的每个部分都必须是其自己的.html文件。因此，主体page1.html将如下所示。我更改了您的代码，在容器中包含了一个div来保存帖子，并将data- inside scroll属性赋予了div . posts -feed。然后我移动了这个
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="scroller-status__message infinite-scroll-last">End of content</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>在容器内。
<body>
<div class="main">
<div class="container" >
<div class ="posts-feed" data-infinite-scroll='{ "path": ".pagination__next", "append": ".post", "status": ".scroller-status", "hideNav": ".pagination"}' >
<article class="post">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In hendrerit in sem eu elementum. Nam sagittis eleifend aliquam. Cras viverra, sapien vel auctor viverra, augue leo commodo ipsum, id euismod elit nisl id felis. Integer vitae mauris est. Cras vitae varius tortor. Nullam tristique ullamcorper imperdiet. Suspendisse potenti. Donec in elit felis. Donec eget nunc porttitor, lobortis lectus id, sagittis urna. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam vitae ornare purus. Sed augue purus, cursus in malesuada non, interdum molestie massa. In interdum nisi at purus gravida rutrum. Praesent finibus lacus ac imperdiet tincidunt.</p>
<p><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br></p>
</article>
</div>
<div class="scroller-status">
<div class="loader-ellips infinite-scroll-request">
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
<span class="loader-ellips__dot"></span>
</div>
<p class="scroller-status__message infinite-scroll-last">End of content</p>
<p class="scroller-status__message infinite-scroll-error">No more pages to load</p>
</div>
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>
</div>
</div>
</body> 注意末尾有一块看起来像这样的
<p class="pagination">
<a class="pagination__next" href="page2.html">Next page</a>
</p>这是在href中告诉无限滚动下一步要加载什么。然后，这将从一个名为page2.html的单独文件中加载内容
然后，同一部分的page2.html应为
<p class="pagination">
<a class="pagination__next" href="page3.html">Next page</a>
</p>以便加载page3.html内容。
https://stackoverflow.com/questions/52882418
复制相似问题
腾讯云开发者
