Infinite Scroll Componentes

O que é

É o que o Instagram e os blogs fazem: você rola, e mais posts aparecem sozinhos. Você marca a área com sw-infinite, diz de onde buscar (sw-infinite-url, um endereço do seu site que devolve um pedaço de HTML) e onde colocar (sw-infinite-target). O resto é automático.

Precisa do JavaScript do SWCore e de um endereço no seu servidor que devolva o HTML dos próximos itens. O script vigia a rolagem: quando falta menos que sw-infinite-offset pixels para o fim, ele busca a URL (trocando {page} pelo número da página), mostra "Carregando…" e acrescenta o que veio no alvo. Quando o servidor devolver uma resposta vazia, ele entende que acabou e para. Os componentes SWCore que vierem no HTML novo já chegam funcionando.

Quando usar

• Blog, notícias, galeria de fotos: a pessoa só quer continuar rolando.
• Lista longa em painel onde paginar com números atrapalha (histórico, mensagens).
• Não use em página que tem rodapé importante (contato, endereço, política): ele nunca chega a aparecer. Nesse caso, pagine com números (Paginação) ou um botão "Ver mais".

Comece aqui

1. 1

   Coloque o SWCore na página (o JS é obrigatório).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   
   <!-- fim do body -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Crie no seu servidor um endereço que devolva só o HTML dos itens de uma página (sem <html>, sem cabeçalho). Ex.: /posts.php?page=2 devolve:

   <article class="post">Post 11</article>
   <article class="post">Post 12</article>
   <article class="post">Post 13</article>
   
   <!-- página que não existe mais: devolva uma resposta VAZIA — é assim que ele sabe que acabou -->

3. 3

   Na página, marque a lista e diga de onde buscar e onde colocar. Se a página já mostra a página 1, comece a busca pela 2 com sw-infinite-start="2".

   <div sw-infinite
        sw-infinite-url="/posts.php?page={page}"
        sw-infinite-target="#lista-posts"
        sw-infinite-start="2">
     <div id="lista-posts">
       <article class="post">Post 1</article>
       <!-- … os posts da página 1, vindos do servidor … -->
     </div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<main>
  <div sw-infinite
       sw-infinite-url="/blog/pagina/{page}"
       sw-infinite-target="#posts"
       sw-infinite-start="2"
       sw-infinite-offset="600">
    <div id="posts">
      <!-- posts da página 1, já vindos do servidor (bom para o Google) -->
    </div>
  </div>
</main>
<!-- a <main> não tem rolagem própria: ele usa a rolagem da página -->

<?php
// /posts.php?page=2
$porPagina = 10;
$pagina    = max(1, (int) ($_GET['page'] ?? 1));
$offset    = ($pagina - 1) * $porPagina;

$stmt = $pdo->prepare('SELECT titulo, resumo FROM posts ORDER BY id DESC LIMIT ? OFFSET ?');
$stmt->bindValue(1, $porPagina, PDO::PARAM_INT);
$stmt->bindValue(2, $offset, PDO::PARAM_INT);
$stmt->execute();

header('Content-Type: text/html; charset=utf-8');
foreach ($stmt as $p) {
    echo '<article class="post"><h2>' . htmlspecialchars($p['titulo']) . '</h2>'
       . '<p>' . htmlspecialchars($p['resumo']) . '</p></article>';
}
// sem linhas = resposta vazia = o componente para de buscar

<div sw-infinite id="posts-box" sw-infinite-url="/posts.php?page={page}" sw-infinite-target="#posts">…</div>
<p id="fim-lista" hidden>Você viu tudo.</p>

<script>
  const box = document.getElementById('posts-box');

  box.addEventListener('sw:infinite:load', (e) => {
    // e.detail.items = os elementos que chegaram; e.detail.page = a página que acabou de chegar
    console.log(e.detail.items.length, 'itens novos');
  });

  box.addEventListener('sw:infinite:end', () => {
    document.getElementById('fim-lista').hidden = false;
  });

  box.addEventListener('sw:infinite:error', (e) => {
    SW.Alert.err('Não foi possível carregar a página ' + e.detail.page);
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css e swcore.min.js.
• Um endereço no seu servidor que devolva o HTML dos itens de cada página (texto HTML, não JSON) e uma resposta vazia quando não houver mais.
• Se o endereço for de outro domínio, ele precisa liberar o seu site (CORS). O mais simples é ficar no mesmo domínio.

Cuidados — erros comuns

• Esquecer o sw-infinite-target: o HTML novo vai parar no fim do <body>, depois do rodapé.
• A página já mostra a página 1 e você não pôs sw-infinite-start="2": a primeira busca traz a página 1 de novo e os posts aparecem repetidos.
• Servidor que devolve a página inteira (com <html>, menu, rodapé): tudo isso é colado na lista. Devolva só os itens.
• Servidor que nunca devolve vazio (ex.: repete a última página): ele busca para sempre. Na última página, responda sem conteúdo.
• Caixa com rolagem própria mas sem altura: ela cresce com o conteúdo, não rola, e ele passa a vigiar a rolagem da página.
• Apontar para um endereço que devolve JSON: ele cola o texto do JSON na tela. Para JSON, use o Conteúdo via JSON.

O que ele não faz

• Não monta HTML a partir de JSON — o servidor precisa mandar o HTML pronto.
• O HTML que chega passa por uma limpeza (a mesma do sw-ajax): <script>, atributos on…="" e links javascript: são removidos. Mesmo assim, escape no servidor o texto que o usuário escreveu (como o htmlspecialchars da receita).
• Não tem botão "carregar mais" nem função para forçar a próxima busca por código: ela acontece pela rolagem.
• Se as primeiras páginas não enchem a caixa, ele só busca de novo quando houver rolagem. Mande itens suficientes por página para passar da altura da tela.
• O rodapé da página fica inalcançável enquanto houver páginas para carregar.