Análisis del método de implementación de relajación y flexibilización inercial en el desarrollo de teléfonos móviles JS+HTML5

Este artículo describe los métodos de implementación de flexibilización de desplazamiento y inercia para el desarrollo de teléfonos móviles JS+HTML5. Compártelo para su referencia, como sigue:

1. Desplácese los siguientes tres métodos de implementación:

1) Use el desbordamiento del atributo CSS nativo: scroll div id = style parent = desbordamiento: scroll; Divid = 'Content' Área de contenido /Div /Div Aviso: hay un error en Android y volverá a ser el área de contenido superior después del desplazamiento. La solución es usar los dos últimos métodos para implementarlo.

2) Idea de implementación de programación JS: compare los cambios de posición del frente y la parte posterior de los dedos en la pantalla para cambiar el contenido del elemento de contenido

1. Desplazarse

Aquí hay tres métodos de implementación:

1) Use el desbordamiento del atributo CSS nativo: desplazamiento

 <div id = "parent" style = "Overflow: scroll;> <div id = 'contenido'> Área de contenido </div> </div>

Aviso:

Hay un error en Android, y después de desplazarse, volverá a ser el área de contenido superior. La solución es usar los dos últimos métodos para implementarlo.

2) Implementación de programación JS

Idea: compare la posición del elemento de contenido antes y después de que el dedo se mueva en la pantalla

Paso 1: configure el desbordamiento de los padres en oculto, establezca la posición del contenido en relativo y superior a 0;

Paso 2: Escuche los eventos táctiles

 var parent = document.getElementById ('parent'); parent.adDeventListener ('touchStart', function (e) {// do touchStart}); parent.adDeventListener ('touchmove', function (e) {// do touchmove}); parent.addeventlistener ('touchend', function (e) {// do do touchend}); parent.addeventListener ('touchend', function (e) {// do touchend});

Paso 3: implementar el código de desplazamiento

 /*** Solo se implementa el desplazamiento vertical aquí*/var parent = document.getElementById ('parent'); var content = document.getElementById ('content') var starty = 0; // posición inicial var dIlaTy = 0; // Última posición parent.adDeventListener ('touchStart', function (e) {dasty = starty = e.Touches [0] .pagey;}); parent.addeventListener ('touchmove', function (e) {var nowy = e.Touches [0] .pagey; var mudy = nowy - loRyy; var contenttop = content.style.top.replace ('px', ''); Lasty;

Paso 4: Optimización

El código anterior se ejecuta en el teléfono móvil y tiene muchos resultados atascados.

Para la optimización, consulte:

3) Use el marco ISCROLL4

 var scroll = new iscroll ('parent', {hscrollbar: false, vscrollbar: true, checkdomChanges: true});

Sitio web oficial de marco: http://cubiq.org/iscroll-4

2. Falando inercial

Idea: tome la velocidad promedio v de los dedos que se deslizan en la pantalla durante el último período de tiempo, y deje que V cambie de acuerdo con una función decreciente hasta que no pueda moverse o V <= 0

 /*** Solo se implementa el desplazamiento vertical aquí*/var parent = document.getElementById ('parent'); var content = document.getElementById ('content') var starty = 0; // posición inicial var dIlaTy = 0; // última posición/*** variable para facilitar*/var lastmoveTime = 0; var lastmovestart = 0; var stopinertiamOve = false; // si debe dejar de facilitar a Parent.AdDeventListener ('TouchStart', function (e) {dILTY = starty = e.Touches [0] .Pagey;/ *** Code de facilitación*/ LastMoVEsTART = Lasty; LastMoveTime = E.Timestamp || Date.Now (); Varway = e.Touches [0] .pagey; Date.now (); content.style.top.replace ('PX', ''); LastMoVETime); if (stopinertiMove) return; setTimeout (inercio, 10);

PD: Aquí hay algunas herramientas de formato y embellecimiento de código para usted. Creo que los usará en el proceso de desarrollo futuro:

Terrenos de embellecimiento y formato de código de JavaScript en línea:

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

Herramientas de compresión/formato/cifrado de JavaScript:

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

Código JSON Formateo en línea/embellecimiento/compresión/edición/herramientas de conversión:

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

VERIFICACIÓN DE CÓDIGO JSON, INSPECCIÓN, BABÍA DE HERRAMIENTAS DE CÓDIGO Y FORMATO:

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

For more information about jQuery, please visit this site's special topics: "Summary of common plug-ins and usages of jQuery", "Summary of Ajax usage in jquery", "Summary of jQuery table (table) operation skills", "Summary of jQuery drag and drop effects and techniques", "Summary of jQuery extension skills", "Summary of common classic special effects of jQuery", "Summary of jQuery animation and special Efectos de los usos "y" Resumen de usos selectores de jQuery "

Espero que este artículo sea útil para la programación jQuery de todos.