O ListOnging é um pull-up móvel e carregando mais componentes. Ele depende principalmente de componentes desenvolvidos com base no ISCROLL.JS v5.1.2. A biblioteca básica pode usar jQuery.js ou zepto.js para operar o nó DOM. Atualmente, uso o Zepto.js como a biblioteca básica para operar o DOM e existo na forma de um plug-in jQuery. Se você não quiser usá-lo como um plug-in, só precisa portar diretamente o carregamento de listas para a biblioteca que precisa, tudo bem. O carregamento de listas é projetado principalmente para terminais móveis. Ao usar o navegador, ele vem com rolagem. A experiência do usuário é muito hostil e é muito diferente do Android e do iOS. Portanto, escolhe o ISCROLL.js. Seu método de implementação é usar a animação CSS3 traduzir a conversão 2D para obter o efeito de rolagem. O atributo de transformação usa aceleração de hardware e o método de desempenho foi bastante aprimorado.
Instalação do NPM
A cópia do código é a seguinte:
NPM Install -g Listarloading
Como usá -lo é o seguinte:
1. Estrutura HTML
A mesma estrutura que o ISCROLL criou, mas o nó do elemento criado especificado deve especificar o ID, porque é necessária uma identidade identificável para publicar o modo de assinatura no componente. Como o Iscroll deve definir a altura antes que o elemento do nó seja criado, caso contrário, não será rolável; O ISCROLL é criado e atribuído ao primeiro elemento filho a rolar; portanto, a atualização suspensa e suspensa do carregamento de listagem também é adicionada ao primeiro elemento filho. De fato, imagine o primeiro elemento infantil como o corpo em HTML.
2. JS que precisam ser introduzidos
<script src = "../ src/jslib/zepto.min.js"> </script> <script src = "../ src/jslib/iscroll.js"> </script> <script src = "../ build/listloading.js"> </script>
3. Ligue para
var m = 3, n = 0; // Você deve definir a altura do elemento pai antes de criar um ISCROLL; caso contrário, não poderá arrastar o ISCROLL $ ('#ListLoading'). Hight ($ (Window) .Height ()); // Modelo ou AJAX Solicitação Método var CreateHtml = function () {var __html = ''; para (var i; Date (). Gettime (); agora = nova data (agora + i*1000000); __ html + = '<li> <pan> </span> <p> <time>' + agora.gethours () + ':' + agora.getMinutes () + ':' +.getSeconds () + '> </time> listOnging' ' +' + +.getSeconds () + '> </time> Componente ... </li> ';} retornar __html;} // O seletor deve ser um ID, porque é necessário usar a assinatura de publicação como o identificador var listLoading = $ ('#listarloading '). Listroading (fIlSeset (inabletime: // true, // se o tempo de exibição é necessário: função: function; createhtml (); if (m <1) {flg = true;} else {$ ('#list de ordem'). Appender (__ html);} // Depois que os dados forem carregados, é necessário retornar a extremidade true. Createhtml (); $ ('#Lista de ordem'). HTML (__ HTML); // Após a execução do método de execução, o retorno de chamada deve ser executado. Bubbles, também recomenda escrever o método de clique por si só. Se você habilitar o PreventDefault a False, essa linha resolverá o problema da falha do OnClick. No entanto, se você abrir esse valor e arrastá -lo sob o WeChat, haverá problemas. Depois que o slide termina, o Scrollend não pode ser acionado. Por isso, incorporei um método de evento para mim mesmo listarloading.evt ('li', 'click', function (dom) {// dom.remove (); // $ ('#order-list'). Append (createhtml ()); // listloading.refresh ();});Diagrama de reprodução
/p>
4. API
4.1 Puxe para baixo para atualizar
A inicialização será executada uma vez, principalmente para criar um ISCROLL e, em seguida, cada atualização é executada após o final de cada atualização. Após a execução do seu programa no método, uma função de retorno de chamada precisa ser executada para informar todos os programas que foram executados, o ListOnging chamará automaticamente a função de atualização do ISCROLL e o retorno de chamada não requer uma transmissão de parâmetros.
options.pullDownAction = function (cb) {// puxe para baixo para atualizar .... // Depois de executar o método de execução, o retorno de chamada CB () deve ser executado;}4.2 Atualização de pull-up
Cada atualização de pull-up é executada após a conclusão da atualização. O mesmo é necessário para executar uma função de retorno de chamada depois de executar seu programa. Um valor booleano é necessário no retorno de chamada. Se for verdade, por que foi carregado e foi puxado até o final.
options.pullupAction = function (cb) {// Atualizar ...4.3 Destrua a carga de lista
A cópia do código é a seguinte:
listOLLOUNGING.Destroy ();
4.4 Refresh Listarloading
Se houver adições e exclusões no nó da área de rolagem, você precisará chamar esse método após a conclusão da operação.
A cópia do código é a seguinte:
listLoading.Refresh ();
4.5 Se a exibição do valor padrão do tempo é falsa
True pull-down exibe o tempo, o tempo da última atualização
A cópia do código é a seguinte:
options.disableTime = true
4.6 Puxe para cima para atualizar o texto
A cópia do código é a seguinte:
options.upLoadMoretxt = 'Puxe para cima para atualizar o texto'; // você pode colocar tags html nele
4.7 Puxe para baixo para atualizar o texto
A cópia do código é a seguinte:
options.pulldrefreshtxt = 'arraste para baixo para atualizar o texto'; // você pode colocar tags html nele
4.8 Carregando caracteres chineses
A cópia do código é a seguinte:
options.loadRertxt = 'caracteres chineses estão carregando'; // você pode colocar tags html nele
4.9 Libere o texto de atualização
A cópia do código é a seguinte:
options.realtimetxt = 'Libere o texto da atualização'; // você pode colocar tags html dentro
4.10 Todos os textos foram carregados
A cópia do código é a seguinte:
options.loaderendtxt = 'Todo o texto foi carregado'; // você pode colocar tags html nele
4.12 Configuração do ISCROLL
A cópia do código é a seguinte:
options.iscrollOptions = {};
O acima exposto é o componente de atualização do terminal móvel ListLoading.js, introduzido pelo editor. Espero que seja útil para todos. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a todos a tempo. Muito obrigado pelo seu apoio ao site wulin.com!