HTML5シングルページでジェスチャースライド画面切り替えを実装する方法

今回はHTML5シングルページでジェスチャースライド画面切り替えを実装する方法を紹介します HTML5シングルページでジェスチャースライド画面切り替えを実装するにはどうすればよいですか？ HTML5 シングルページでのジェスチャーによるスライド画面切り替えの注意事項は何ですか? 以下は実際的なケースです。見てみましょう。

H5 単一ページ ジェスチャのスライディング画面切り替えは、HTML5 タッチ イベント (Touch) と CSS3 アニメーション(Transform、Transition) を使用して実装されています

1 実装原理

5 ページあると仮定し、各ページが 100% を占めます。画面の % 幅、DIV コンテナ ビューポートを作成し、その幅 (幅) を 500% に設定してから、コンテナに 5 ページをロードし、これらの 5 ページでコンテナ全体を均等に分割し、最後にコンテナのデフォルトの位置を 0 に設定します。 、オーバーフローは非表示に設定されているため、デフォルトで画面に最初のページが表示されます。

<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>

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;
}

touchstart、touchmove、touchend イベントを登録します。指が画面上をスライドしたときに、CSS3 変換を使用してビューポートの位置をリアルタイムに設定します。たとえば、2 ページ目を表示するには、 viewport 変換:translate3d(100%,0,0) で十分です。ここでは、translateX の代わりに translation3d を使用します。translate3d は、携帯電話の GPU をアクティブにしてレンダリングを高速化し、ページのスライドをよりスムーズにします。

2. 主なアイデア

これは、画面上に指を置き、スライド操作してから画面を離れるまでの完全な操作プロセスです。対応する操作により、次のイベントがトリガーされます:

画面上に指を置く: ontouchstart

画面上で指をスライドさせる: ontouchmove

指が画面から離れる: ontouchend

ページのスライドを完了するには、次の 3 段階のタッチ イベントをキャプチャする必要があります:

ontouchstart: 変数を初期化し、指、現在時刻を記録します

/*手指放在屏幕上*/
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 : 現在位置を取得し、画面上の指の動きの差ΔXを計算し、それに応じてページを移動させます

/*手指在屏幕上滑动，页面跟随手指移动*/
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);

この方法はマスターできたと思いますこれらの事例を読んだ後、さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

関連記事:

H5 でビデオタグとオーディオタグとプログレスバーを使用する方法

H5 と C3 の新しいインタラクティブ機能とは何ですか

H5 のブロックレベルタグの概要

以上がHTML5シングルページでジェスチャースライド画面切り替えを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。