construir SPAs, às vezes deparamos com a necessidade de exibir dados usando a técnica de deslocamento infinito — ou seja, continuamente carregando dados à medida que o usuário percorre a página.

desde que a API Observador de intersecção foi adicionada aos navegadores, a construção de um componente de pergaminho infinito reutilizável nunca foi tão fácil. Vamos aprender como podemos criar tal componente usando esta API.

Note que nós não vamos mergulhar na API Observador da intersecção, então se você não está familiarizado com ela, eu recomendo ler este artigo de antemão.

O conceito principal é colocar um elemento observável no final de uma lista de itens exibidos, a fim de adicionar mais dados quando o usuário chegar ao fundo dessa lista.

Nós queremos fazer como flexível possível, de modo a deixarmos nossos consumidores passar qualquer modelo que deseja usar ng-content. Abaixo dele, adicionamos um elemento âncora que servirá como o elemento alvo que observamos.

Vamos criar a Intersecção Observador:

Primeiro, devemos criar um novo tag IntersectionObserver, que recebe entries como seu argumento. Esta função será chamada sempre que o elemento observado entrar na área de visualização.

Podemos verificar o estado de visibilidade do elemento olhando para a propriedade isIntersection. Se for verdadeiro, o elemento alvo tornou-se pelo menos tão visível como o limiar que foi ultrapassado. O limiar padrão é 0, o que significa que assim que um pixel estiver visível, a chamada será executada.

A seguir, chamamos o método observe(), passando por ele o elemento âncora. Isto iniciará a observação deste elemento.

🦊 Suporte de barra de deslocamento Recipientes

root propriedade indica o elemento que é usado como visor para verificar a visibilidade do alvo. Quando configurado para null é por omissão o navegador viewport.

Há momentos em que precisamos ter um contêiner controlável, e então queremos que esse contêiner aja como o elemento root. Vamos suportar esta funcionalidade:

adicionamos uma verificação para ver se o elemento da máquina actual é um contentor controlável. Se for, definimo-lo como o elemento root.

por último, não queremos vazamentos de memória em nossa aplicação, então vamos desligar o observador quando o componente destruído:

É como simples como isso.

vamos ver como usá-lo:

Ou com uma barra de deslocamento recipiente:

o Suporte do Navegador

A Intersecção Observador API funciona na maioria dos navegadores. Se necessitar de suportar navegadores antigos, como o IE, poderá carregar um polifill ou um recurso para o evento de posicionamento em tempo de execução.já experimentou o Akita?

uma das principais bibliotecas de gestão estatal, o Akita tem sido usado em inúmeros ambientes de produção. Está constantemente a desenvolver-se e a melhorar.

Se São entidades que chegam a partir dos dados do servidor ou do estado UI, o Akita tem Lojas personalizadas, ferramentas poderosas e plugins feitos à medida, que o ajudam a gerir os dados e a negar a necessidade de quantidades maciças de código boilerplate. Recomendo vivamente que o Experimente.

Siga-me no Médio ou no Twitter para ler mais sobre Angular, Akita e JS!

Deixe uma resposta

O seu endereço de email não será publicado.