Question

几个小时尝试在博客中实现Infinite Scroll。目标很简单，主页太长，我希望它逐渐加载。插件的作者可以正常使用example，但是，无论我做什么，就我而言，插件都无法正常工作。我想我缺少了什么。

如果我理解正确，那么插件的工作原理如下：我们在其中创建了一个常见的div和文章。进入页面时，一个人看到第一篇文章，向下滚动到下一篇文章，页面被放大，并且已经显示了2篇文章，依此类推。看来这就是我在做什么。

我试图通过链接附加它

<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>

我将非常感谢您的帮助！

Answer 1

确保从http //地址运行页面，如果从本地文件运行页面，则无限滚动将不起作用。我使用节点npm设置了本地环境，并表示如下所示……

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-infinite-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

的单独文件中加载内容。

然后是同一页面的第2页html

<p class="pagination">
   <a class="pagination__next" href="page3.html">Next page</a>
</p>

，以便加载page3.html内容。

无法安装无限滚动

1 个答案: