Análise do método de implementação de rolamento e flexibilização inercial no desenvolvimento de telefones celulares JS+HTML5

Este artigo descreve os métodos de implementação de rolagem e flexibilização inercial para o desenvolvimento de telefones celulares JS+HTML5. Compartilhe -o para sua referência, como segue:

1. Role os três métodos de implementação a seguir:

1) Use o transbordamento nativo do atributo CSS: roll Div ID = Estilo pai = Overflow: Roll; Divid = 'Conteúdo' Área de Conteúdo /Div /Div Aviso: Há um bug no Android e ele voltará à área de conteúdo superior após a rolagem. A solução é usar os dois últimos métodos para implementá -lo.

2) Idéia de implementação da programação JS: Compare as mudanças de posição da frente e de trás dos dedos na tela para alterar o conteúdo do elemento de conteúdo

1. Role

Aqui estão três métodos de implementação:

1) Use o transbordamento nativo do atributo CSS: role

 <div id = "pai" style = "Overflow: scroll;> <div id = 'content'> Content Area </div> </div>

Perceber:

Há um bug no Android e, após a rolagem, ele voltará à área de conteúdo superior. A solução é usar os dois últimos métodos para implementá -lo

2) Implementação de programação JS

Ideia: Compare a posição do elemento de conteúdo antes e depois que o dedo se move na tela

Etapa 1: Defina o transbordamento dos pais como oculto, defina a posição do conteúdo como parente e de cima para 0;

Etapa 2: Ouça eventos de toque

 var pai = document.getElementById ('parent'); parent.addeventListener ('touchstart', function (e) {// do touchstart}); parent.addeventListener ('touchmove', function (e) {// do touchmove}); Toukend}); parent.addeventListener ('Toukend', function (e) {// do toukend});

Etapa 3: Implemente o código de rolagem

 /*** Somente rolagem vertical é implementada aqui*/var pai = document.getElementById ('pai'); var content = document.getElementById ('content') var starty = 0; // posição inicial var lasty = 0; // Última posição parent.addeventListener ('touchstart', function (e) {lasty = starty = e.Touches [0] .Pagey;}); parent.adDeventListener ('touchmove', function (e) {var nowy = e.toouches [0] .Pagey; vary.yyy; ''); content.style.top.replace ('px', '');

Etapa 4: otimização

O código acima é executado no telefone celular e tem muitos resultados presos.

Para otimização, consulte:

3) Use a estrutura do ISCROLL4

 var scroll = new Iscroll ('Parent', {hscrollBar: false, vcrollbar: true, checkDomChanges: true});

Site oficial da estrutura: http://cubiq.org/iscroll-4

2. Afiliação inercial

Ideia: pegue a velocidade média v dos dedos que deslizam na tela durante o último período de tempo e deixe V mudar de acordo com uma função decrescente até que não possa se mover ou v <= 0

 /*** Somente rolagem vertical é implementada aqui*/var pai = document.getElementById ('pai'); var content = document.getElementById ('content') var starty = 0; // posição inicial var lasty = 0; // Última posição/*** variável para facilitar*/var lastMoveTime = 0; var lastMovestart = 0; var stopinertediamove = false; // se deve parar de aliviar o pai. var nowy = e.ToChes [0] .Pagey; Date.now (); content.style.top.Rear LastMovetime); Se (stopinetiamove) retorna; Settimeout (INERTIAMENT, 10);

PS: Aqui estão algumas ferramentas de formatação e embelezamento de código para você. Eu acredito que você os usará no processo de desenvolvimento futuro:

Ferramentas de embelezamento e formatação de código JavaScript on -line:

http://tools.vevb.com/code/js

Ferramentas de compactação/formatação/criptografia javascript:

http://tools.vevb.com/code/jscompress

Código JSON Formatação/embelezamento on -line/Ferramentas de compressão/edição/conversão:

http://tools.vevb.com/code/jsonncodeFormat

Ferramentas on -line de código JSON, inspeção, embelezamento e formatação:

http://tools.vevb.com/code/json

Para obter mais informações sobre o jQuery, visite os tópicos especiais deste site: "Resumo dos plug-ins e usos comuns do jQuery", "Resumo do uso do Ajax em jQuery", "Resumo de JQuery Table (Table) Operation Skills", "Summery of JQuery Drag and Drop Efeitos e técnicas", "Resumo de JQuery Extension", "Summary" Summery Of JQuery Drag e Drop Efeitos e técnicas "," Resumo de JQuery Extension " usos de efeitos "e" Resumo dos usos de seletor de jQuery "

Espero que este artigo seja útil para a programação jQuery de todos.