Как реализовать подргузку новых элементов в list (любой) бесконечно

Kopusha	#45613 17.04.2022 07:45
Members Thanked: 90 раз	это один из вариантов оформления - вся документация есть на https://infinite-scroll.com/ 1 Надо подключить js плагин infiniteScroll 2 всюду где надо подрузку в tpl дописать class `<div` `class="container-scrl"> в который мы обрамляем то что будет подгружать` `<article` `class="post-scrl" элементы которые подгружаем в цикле` `<a` `class="pagination__next" триггер по которому начинаем подгружать` 3 надо инициализировать действие плагина кодом js `if( $('.pagination__next').length )` `// Если есть следующая страница в пагинации` `{` `$container = $('.container-scrl');//`в который мы обрамляем то что будет подгружать и вперед `$container.infiniteScroll({` `// options` `path:` `'.pagination__next',` `append:` `'.post-scrl',` `history:` `false,//не меняем урл при подгрузке что бы не путать пользователя` `prefill:` `true,` `scrollThreshold: 800,` `//history: 'push', //прописывает в историю и титл стр текущую стр` `//historyTitle: true,` `//button: '.view-more-button',//пока кнопку убрал` `});` `читаем документацию и пробуем.` И да, в каждый лист где надо убрать пагинацию, само оно только в сказке.

Kopusha

#45613 17.04.2022 07:45

это один из вариантов оформления - вся документация есть на https://infinite-scroll.com/

1 Надо подключить js плагин infiniteScroll

2 всюду где надо подрузку в tpl дописать class
<div class="container-scrl"> в который мы обрамляем то что будет подгружать

<article class="post-scrl" элементы которые подгружаем в цикле

<a class="pagination__next" триггер по которому начинаем подгружать

3 надо инициализировать действие плагина кодом js

if( $('.pagination__next').length )         // Если есть следующая страница в пагинации

{

$container = $('.container-scrl');//в который мы обрамляем то что будет подгружать

и вперед

 $container.infiniteScroll({
      // options
      path: '.pagination__next',
      append: '.post-scrl',
      history: false,//не меняем урл при подгрузке что бы не путать пользователя
      prefill: true,
      scrollThreshold: 800,
      //history: 'push', //прописывает в историю и титл стр текущую стр
      //historyTitle: true,
      //button: '.view-more-button',//пока кнопку убрал
    });
 
читаем документацию и пробуем.
 
И да, в каждый лист где надо убрать пагинацию, само оно только в сказке.