时间戳

首页 > 解决方案 > 无法安装无限卷轴

html - 无法安装无限卷轴

问题描述

几个小时试图在博客中实现无限滚动。目标很简单，主页太长，我希望它逐渐加载。该插件的作者有一个完美的工作示例，但是，无论我做什么，就我而言，该插件无法正常工作。我想我错过了一些东西。

如果我理解正确，那么插件的工作原理是这样的：我们在其中创建一个通用 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>

我将非常感谢您的帮助！

标签： htmlscrollblogsinfinite-scrollendlessscroll

解决方案

确保您从 http// 地址运行页面，如果您从本地文件运行它，无限滚动将不起作用。我使用 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 │<br> ├── 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 的单独文件中加载内容

然后应该阅读同一部分的 page2.html

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

以便加载 page3.html 内容。

推荐阅读