Analyse de la méthode de mise en œuvre du roulement et de l'assouplissement inertielle dans le développement de téléphones mobiles JS + HTML5

Cet article décrit les méthodes de mise en œuvre de défilement et d'assistance inertielle pour le développement de téléphones mobiles JS + HTML5. Partagez-le pour votre référence, comme suit:

1. Faites défiler les trois méthodes de mise en œuvre suivantes:

1) Utilisez le débordement d'attribut CSS natif: Scroll Div Id = Parent Style = Overflow: Scroll; DIVID = 'Content' Content Zone / Div / Div Avis: Il y a un bug dans Android, et il retombera dans la zone de contenu supérieure après le défilement. La solution consiste à utiliser les deux dernières méthodes pour l'implémenter.

2) Idée d'implémentation de programmation JS: Comparez les modifications de position de l'avant et de l'arrière des doigts à l'écran pour modifier le contenu de l'élément de contenu

1. Roubl

Voici trois méthodes de mise en œuvre:

1) Utilisez le débordement d'attribut CSS natif: défilement

 <div id = "parent" style = "Overflow: Scroll;> <div id = 'Content'> Content Area </div> </div>

Avis:

Il y a un bug dans Android, et après le défilement, il retombera dans la zone de contenu supérieure. La solution consiste à utiliser les deux dernières méthodes pour l'implémenter

2) Implémentation de programmation JS

Idée: comparez la position de l'élément de contenu avant et après le doigt se déplace sur l'écran

Étape 1: Définissez le débordement des parents sur Hidden, définissez la position du contenu sur relatif et dépassez-vous à 0;

Étape 2: Écoutez les événements Touch

 var parent = document.getElementById ('Parent'); parent.addeventListener ('TouchStart', fonction (e) {// do touchstart}); parent.addeventListener ('touchmove', function (e) {// do touchmove}); parent.addeventListener ('touch', function (e) {// Do TouchEnd}); parent.addeventListener ('TouchEnd', fonction (e) {// do toung});

Étape 3: Implémentez le code de défilement

 / ** * Seule le défilement vertical est implémenté ici * / var parent = document.getElementById ('parent'); var content = document.getElementyid ('contenu') var starty = 0; // position initiale var lasty = 0; // en dernière position parent.addeventListener ('touchstart', fonction (e) {lasty = starty = e.touches [0] .pagey;}); parent.addeventListener ('touchmove', function (e) {var nowy = e.touches [0] .pagey; var movy = nowy - lasty; ''); contenu.style.top.replace ('px', '');

Étape 4: Optimisation

Le code ci-dessus s'exécute sur le téléphone mobile et a beaucoup de résultats coincés.

Pour l'optimisation, veuillez consulter:

3) Utiliser le cadre ISCROLL4

 var scroll = new isCroll ('Parent', {hscrollbar: false, vscrollbar: true, checkDomChanges: true});

Framework Site Web officiel: http://cubiq.org/iscroll-4

2. Assoupant inertiel

Idée: prenez la vitesse moyenne V des doigts qui glissent sur l'écran pendant la dernière période, et laissez V changer en fonction d'une fonction décroissante jusqu'à ce qu'elle ne puisse pas bouger ou V <= 0

 / ** * Seule le défilement vertical est implémenté ici * / var parent = document.getElementById ('parent'); var content = document.getElementyid ('contenu') var starty = 0; // position initiale var lasty = 0; // Variable de dernière position / ** * pour l'assouplissement * / var lastmoveTime = 0; var lastmovestart = 0; var stopInertiAmove = false; // s'il faut arrêter l'assistance parent.adDeventListener ('Touchstart', fonction (e) {lasty = starty = e.touches [0] .pagey; / ** * Code de soulage Nowy = E.Touches [0] .Pagey; var Movey = Nowy - Lasty; Date.Now (); Content.style.top.replace (PX ',' '); LastMoveTime); if (stopInteramove) setTimeout (InertiAmove, 10);} InertiAmove ();}) (V, maintenant, CONTACT);});

PS: Voici quelques outils de formatage et d'embellissement de code pour vous. Je crois que vous les utiliserez dans le processus de développement futur:

Outils d'embellissement et de formatage du code JavaScript en ligne:

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

Outils de compression / formatage / de formatage JavaScript:

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

Code JSON en ligne Formatage / embellissement / compression / édition / conversion des outils:

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

Outils de vérification, d'inspection, d'embellissement et de formatage du code JSON en ligne:

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

Pour plus d'informations sur JQuery, veuillez visiter les sujets spéciaux de ce site: "Résumé des plug-ins communs et usages de jQuery", "Résumé des compétences d'opération de l'Ajax dans jQuery", "Résumé de la table jQuery (table)", "Résumé du jQuery Drag and Drop Effets and Techniques", "Résumé de JQuery Speachyt Usages "et" Résumé des usages de sélecteur jQuery "

J'espère que cet article sera utile à la programmation jQuery de tous.