AngularJS/ HTML5 / CSS3/ Javascript/ JQuery

Criando um scroll Infinito com o AngularJS e JQuery

scrollinfinito-jquery

Esse post é o início de uma série de posts relacionados ao AngularJS, se você não conhece, é bom conhecer, muito de seu comportamento é semelhante ao que tinhamos no Flex, por exemplo Databind e a idéia de componentizar. E o mais legal de tudo é que ele é compatível com qualquer biblioteca que manipule o DOM, por exemplo Zepto e JQuery, ou até mesmo o Twitter Bootstrap.

O AngularJS facilita e muito certas tarefas e mantem o DRY bem vivo. Por exemplo, esse post eu quero falar sobre o scroll infinito, igual o comportamento que o Twitter possui ou o LinkedIn possui quando você vai rolando a página e dados vão pipocando em sua frente. Pois bem, como eu faria isso em puro Javascript e usando o seletor do DOM jQuery?

O scroll é um mal necessário, é o que a Microsoft tenta adotar na nova interface do Windows 8 e o que o Flex tentou quando lançou a versão 4.0. Porém é necessário trazer informações à medida que elas vão acontecendo ou carregar só o necessário e à medida que o usuário for investigando elas forem brotando.

scrollinfinito-jquery

Scroll Infinito com Javascript e JQuery.

O HTML é bem simples:

	<div id="conteudo">
    <ul id="lista"></ul>
</div
var contador = 1;
 
$(document).ready(function () {
    carregar();
    $(this).on('scroll', function () {
        if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
            carregar();
        }
    });
});
 
function carregar() {
    for (var i = 0; i < 10; i++) {
        $("#lista").append('<li><img src="http://placehold.it/100x100"/><div><h4>' + contador + ' Item</h4><p>Descrição do item '+contador+'</p></div></li>');
        contador++;
    }
}

A medida que a soma da posição da barra mais a altura da janela superar o tamanho da altura do documento, ele executa a função carregar, jogando mais itens na lista.

O truque também está na maneira como você declara o CSS, margin faz um estrago danado quando não aplicada de forma correta, nesse exemplo eu coloquei uma aparência de uma lista de smartphone, igual no Android.

body, ul,li,img,h4,p{
    margin:auto;
    font-family:'Droid Sans';
}
ul {
	margin-left: -40px;
	list-style:none;
}
li {
    color:#111;
    height: 100px;
    border-bottom:1px solid #fff;
    padding:10px;
}
li h4 {
    font-weight:400;
    font-size:20px;
    padding:0;
}
li img {
    padding-right:10px;
    float:left;
    display:block;
    vertical-align:text-top;
}
li div {
    display:inline;
}
li p {
    font-weight:300;
    font-size:12px;
}
#conteudo {
    width:100%;
    background:rgba(0,0,0,0.1);
    overflow:auto;
}

E aqui está o exemplo rodando, eu usei o jsFiddle para demonstrar melhor.

Você pode ver sendo executado diretamente no jsFiddle

Criando agora uma lista infinita com o AngularJS

O AngularJS possui vários truques na manga para deixar sua vida mais fácil, módulos, tags personalizados, data-bind, repetidores, diretivas, controllers, esses são alguns de seus recursos. A melhor parte dele como mencionei acima é que é compatível com outras bibliotecas.

Para fazer esse exemplo você vai fazer uma pequena alteração no html e substituir o Javascript, os estilos que é o visual continuam o mesmo.

Logo de cara para identificar como um App, você precisa alterar o html e fazer da seguinte forma:

<!doctype html>
<html ng-app="Rolagem">
<head>

Isso define que o módulo Rolagem será seu App nesse arquivo de html, então na parte de repetir os itens você faz da seguinte forma.

<body ng-controller="Main">
	<div id="conteudo" fazer-rolagem="carregar()">
    <ul id="lista">
         <li ng-repeat="i in items">
            <img src="http://placehold.it/100x100"/>
            <div><h4>{{i.id}} Item</h4>
            </div>
        </li>
    </ul>
</div
</body>

Como o AngularJS abstrai bastante o escopo do javascript para com o HTML, é notável algumas propriedades como o ng-controller, fazer-rolagem que são primariamente customizáveis, a presença do ng-repeat indica que o arquivo vai ser repetido N vezes, conforme vamos adicionando novos itens à lista.

E a parte fundamental desse processo é o Javascript:

function Main($scope) {
    $scope.items = [];
 
    var counter = 1;
    $scope.carregar = function() {
        for (var i = 0; i < 10; i++) {
            $scope.items.push({id: counter});
            counter += 1;
        }
    };
 
    $scope.carregar();
}
 
angular.module('Rolagem', []).directive('fazerRolagem', function() {
         return function(scope, elm, attr) {
        elm = $(document);
 
        elm.bind('scroll', function() {
             if ($(window).scrollTop() + $(window).height() >= $(this).height()) {
                 scope.$apply(attr.fazerRolagem);
             }
        });
    };
});

Agora você já sabe como criar uma diretiva, fazer um módulo e carregar os itens conforme forem feitos os scrolls, no JQuery quando você quer escutar um evento você geralmente usa o $on(), no AngularJS é necessário usar o bind, ele que vai escutar pelo evento.

Maneiras diferentes de aplicar a mesma técnica, para um resultado igual, Eu gostei mais do AngularJS, escrevi menos código e atingir o mesmo resultado.

Ah! lembrando que esses códigos estão disponíveis no Github.

6 thoughts on “Criando um scroll Infinito com o AngularJS e JQuery

  1. Bom exemplo, mas porque não um tutorial? O artigo explica melhor o scroll que AngularJS :)

    “Agora você já sabe como criar uma diretiva,” sim, mas não foi aqui neste exemplo que apredi :)

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *