Не могу установить бесконечный свиток - PullRequest
Новая
       45

Не могу установить бесконечный свиток

0 голосов
/ 18 октября 2018

Несколько часов пытались реализовать Бесконечный свиток в блоге.Цель проста, главная страница слишком длинная, я хочу, чтобы она загружалась постепенно.У авторов плагина есть отлично работающий пример , однако, что бы я ни делал, в моем случае плагин не работает должным образом.Я предполагаю, что что-то упустил.

Если я правильно понял, то плагин работает так: мы создаем общий 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>

Я буду очень благодарен за помощь!

1 Ответ

0 голосов
/ 19 октября 2018

Убедитесь, что вы запускаете страницу с 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.

...