Programação / jQuery

Criando o efeito de Scroll Infinito para um feed de conteúdo do seu sistema

Veja como que você desenvolve a técnica para ter um carregamento sob demanda de conteúdo de acordo com a rolagem da página

Por Gustavo Web

Publicado por Gustavo Web
em 17/08/2018 às 09h58

Lista VIP UpInside

Entre para nossa lista VIP e receba vídeo aulas, artigos e tutoriais exclusivos e com prioridade

  QUERO ENTRAR

Aula exclusiva UpInside Play

Acessar aula no Play

Compartilhe:

Salve salve moqueridos, Gustavo Web aqui novamente e no Play de hoje vamos ver como colocar o scroll infinito para rodar na nossa aplicação.

A princípio a técnica é bem simples! Você precisa monitorar o scroll da página e quando ela chegar no final, você dispara uma ação para que mais conteúdo seja adicionado na tela.

Isso é bastante claro no facebook por exemplo! Você pode ver que quando você chega no final do seu feed ele automaticamente carrega mais conteúdo sem precisar de uma interação sua.

Material de Apoio

Mais uma vez o projeto inicial que você precisa está dentro de um repositório nosso do GitHub, logo aqui abaixo você vai encontrar uma estrutura básica para que a gente possa partir do mesmo ponto!

Não tem nenhum segredo a mais... Só uma estrutura em HTML com um CSS já pré formatado para que a gente não precise ficar investindo tempo nisso.

Pode ficar tranquilo que todo o código é desenvolvido em aula.

Clique aqui e eu te levo para o Repositório Agora!

Disparo da ação

Trabalhamos com o jQuery para ficar monitorando o scroll! Assim que determinada condição é atendida, basta a gente fazer um post para um controlador em PHP que vai se conectar ao banco de dados e trazer mais N registros que vão entrar no escopo do nosso documento.

Um ponto importante é que você precisa ter uma ordenação para esses registros, senão eles vão acabar se repetindo de acordo com o carregamento.

Uma outra questão que é legal você prever também é um ponto de parada. Quando chegar ao final, avise o leitor que acabou as informações!

É claro que durante a aula a gente desenvolve um exemplo bem simples com textos repetidos... Mas essa técnica você pode aplicar em qualquer projeto sem problema nenhum.

FullStack PHP Developer

Não sei se você já está sabendo, mas o Robson está gravando o curso mais (!%@#%) de PHP que você já viu! É o FullStack PHP Developer.

Estou citando isso no artigo dessa aula, porque o curso tem como proposta utilizar recursos modernos...

Sei que você ainda não entendeu o motivo, mas eu vou te explicar: Se você ainda não conhece PHP e quer começar do zero essa é a formação que você precisa, mas se você está lendo esse artigo, procurando por esse recurso, provavelmente você já sabe o que está fazendo e já tem o mínimo de afinidade com a linguagem.

E eu tenho que te confessar, essa formação também é para você! Eu que já conheço "5%" do PHP, logo no segundo módulo do curso eu tirei um recurso que eu faço o uso nessa aula. Se você assistir o vídeo (exclusivo para membros do UpInside Play) vai ver o uso do vsprintf!

Ficou curioso? Quer saber como usar? Mais do que ler a documentação e entender como funciona, saber de fato onde pode ser aplicado? Fala com a nossa equipe via chat ou por e-mail e se informe.

Feedback

Se você conseguiu desenvolver esse protótipo junto comigo na aula, me conte aqui abaixo nos comentários. Vou estar disponível para que a gente possa conversar sobre esse assunto e te ajudar caso você tenha alguma dúvida.

Compartilhe:

Em Programação:

Deixe seu comentário: