Prefácio
Na seção anterior, havia um projeto móvel que precisava usar a atualização de puxar e carregar mais efeitos. A primeira reflexão em minha mente foi o efeito de Weibo. No começo, tive alguns desvios no meu entendimento. Eu pensei que o pull-down também era um dados de anexos, e o pull-up era um dados de anexo. Mais tarde, perguntei aos meus colegas e descobri que a retirada era apenas uma atualização dos dados mais recentes, e o pull-up era um dados de anexo.
Dicas de uso
1. Consulte o ISCROLL.js e adicione dois eventos escutando durante a inicialização: Touchmove e DomContentLoaded.
2. Implemente o evento ONSCROLLEND do plug-in do ISCROLL, ou seja, neste evento, chame seu próprio método Ajax para atualizar e anexar dados.
3. Ao retirar e carregar mais solicitações em segundo plano, é equivalente a dados de solicitação de paginação. No momento, o parâmetro PageIndex precisa ser enviado durante a solicitação do AJAX e, ao inicializar o carregamento, um Pagecount precisa ser devolvido do segundo plano para o primeiro plano para julgar.
4. O mais importante é implementar o método de atualização de pulldown (PullDownAction) e o método de carga pullup mais (pullupaction).
Diagrama de efeitos de corrida
Método de implementação
var myscroll, pulldonel, pulldownOffset, pullupel, pullowpoffset, generatedCount = 0;/** * Atualizar (personalizar esse método) * myscroll.Refresh (); Depois que os dados são carregados, chame o método de atualização da interface */função pulldownAction () {setTimeout (function () {var el, li, i; el = document.getElementById ('thelist'); para (i = 0; i <3; i ++) {li = document.createelement ('li gene); li.innertext =' generst) (li); el.childnodes [0]); }/** * role e gire as páginas (personalize este método) * myscroll.refresh (); // Após o carregamento de dados, chame o método de atualização da interface*/function pullupAction () {setTimeout (function () {// <- simular congestionamento de rede, remova o setTimeout da produção! (++ gerado,); }/*** Inicialize o controle ISCROLL*/function carregado () {pulldonel = document.getElementById ('pulldown'); pulldownOffset = pulldonel.offsetHeight; puluel = document.getElementById ('pullup'); pullopoffset = pullupel.offSethEight; myScroll = new ISCROLL ('wrapper', {scrollBarclass: 'myscrollbar', usetransição: false, topoffset: pulldownOffset, onRefresh: function () {if (pulldownLap.className.match ('carregamento')) {pULLDownEl.className = ';'; = 'Refresco de pulldown ...'; PULLOWN.CLASSNAME.MATCH (Flip ')) {PULLOWNEL.CLASSNAME =' flip '; PullDonel.className = ''; 'flip'; Pulluplabel '). PullDonel.QuerySelector ('. pullupAction (); setTimeout (function () {document.getElementById ('wrapper'). style.left = '0';}, 800);} // inicialize o documento de controle do ISCROLL de ligação.addeventListener ('touchmove', function (e) {e.PreventDefault ();}, false);Resumir
O principal é fazer algumas operações de inicialização no ISCROLL, exibir informações rápidas diferentes para ações diferentes e, em seguida, escrever uma atualização correspondente e carregar mais métodos de processamento para eventos de pull-up e pull-up.