Comment implémenter le changement d'écran coulissant gestuel dans une seule page HTML5

Cette fois, je vais vous montrer comment implémenter le changement d'écran coulissant gestuel dans une seule page HTML5. Comment implémenter le changement d'écran coulissant gestuel dans une seule page HTML5 ? Quelles sont les précautions pour le changement d'écran coulissant gestuel dans une seule page HTML5 Ce qui suit est un cas pratique, jetons un coup d'oeil.

La commutation d'écran coulissant gestuel sur une seule page H5 est implémentée à l'aide d'un événement tactile HTML5 (Touch) et d'une animation CSS3(Transform,Transition)

Principe de mise en œuvre

<.>En supposant qu'il y a 5 pages, chaque page occupe 100 % de la largeur de l'écran, créez une fenêtre d'affichage de conteneur DIV, définissez sa largeur (largeur) sur 500 %, puis chargez les 5 pages dans le conteneur et laissez ceci L'ensemble du conteneur est réparti à parts égales sur 5 pages. Enfin, la position par défaut du conteneur est définie sur 0 et le débordement est défini sur masqué, afin que l'écran affiche par défaut la première page.

<div id="viewport" class="viewport">
    <div class="pageview" style="background: #3b76c0" >
        <h3 >页面-1</h3>
    </div>
    <div class="pageview" style="background: #58c03b;">
        <h3>页面-2</h3>
    </div>
    <div class="pageview" style="background: #c03b25;">
        <h3>页面-3</h3>
    </div>
    <div class="pageview" style="background: #e0a718;">
        <h3>页面-4</h3>
    </div>
    <div class="pageview" style="background: #c03eac;">
        <h3>页面-5</h3>
    </div>
</div>

Style CSS :

.viewport{
   width: 500%;
   height: 100%;
   display: -webkit-box;
   overflow: hidden;
   //pointer-events: none; //这句话会导致整个页面上的点击事件失效，如需绑定点击事件，请注掉
   -webkit-transform: translate3d(0,0,0);
   backface-visibility: hidden;
   position: relative;
}

Enregistrez les événements touchstart, touchmove et touchend Lorsque votre doigt glisse sur l'écran, utilisez la transformation CSS3 pour définir la position de la fenêtre d'affichage en temps réel. , par exemple Pour afficher la deuxième page, définissez simplement la transformation de la fenêtre d'affichage : translation3d(100%,0,0). Ici, nous utilisons translation3d au lieu de translateX qui peut activer activement le GPU du téléphone mobile pour accélérer le rendu, faisant glisser la page. plus en douceur.

2. Idée principale

De poser votre doigt sur l'écran, glisser, puis quitter l'écran est un processus d'opération complet. L'opération correspondante déclenchera les événements suivants :

Doigt sur l'écran : ontouchstart

Doigt glissant sur l'écran : ontouchmove

Doigt hors de l'écran : ontouchend

Nous devons capturer ces trois étapes de l'événement tactile pour terminer le glissement de page :

ontouchstart : initialiser les variables, enregistrer la position du doigt, enregistrer l'heure actuelle

/*手指放在屏幕上*/
document.addEventListener("touchstart",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   startX = touch.pageX;
   startY = touch.pageY;
   initialPos = currentPosition;   //本次滑动前的初始位置
   viewport.style.webkitTransition = ""; //取消动画效果
   startT = new Date().getTime(); //记录手指按下的开始时间
   isMove = false; //是否产生滑动
}.bind(this),false);

ontouchmove : obtenir la position actuelle, calculer la différence de mouvement deltaX du doigt sur l'écran, puis faites suivre le mouvement à la page

/*手指在屏幕上滑动，页面跟随手指移动*/
document.addEventListener("touchmove",function(e){
   e.preventDefault();
   var touch = e.touches[0];
   var deltaX = touch.pageX - startX;
   var deltaY = touch.pageY - startY;
   //如果X方向上的位移大于Y方向，则认为是左右滑动
   if (Math.abs(deltaX) > Math.abs(deltaY)){
       moveLength = deltaX;
       var translate = initialPos + deltaX; //当前需要移动到的位置
       //如果translate>0 或 < maxWidth,则表示页面超出边界
       if (translate <=0 && translate >= maxWidth){
           //移动页面
           this.transform.call(viewport,translate);
           isMove = true;
       }
       direction = deltaX>0?"right":"left"; //判断手指滑动的方向
   }
}.bind(this),false);

Je pense que vous maîtrisez la méthode après avoir lu ces cas. Pour un contenu plus passionnant, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture connexe :

Comment utiliser les balises vidéo et audio et les barres de progression dans H5

Nouvelle interaction entre H5 et C3 Quelles sont les fonctionnalités

Résumé des balises au niveau du bloc H5

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!