H5 단일 페이지 제스처 슬라이딩 화면 전환 원리

H5 단일 페이지 제스처 슬라이딩 화면 전환은 HTML5 터치 이벤트(Touch)와 CSS3 애니메이션(Transform, Transition)을 사용하여 구현됩니다. 이 기사에서는 구현 원리와 주요 아이디어에 대해 간략하게 설명합니다.

1. 시행원칙

5개의 페이지가 있고 각 페이지가 화면 너비의 100%를 차지한다고 가정하고 p 컨테이너 뷰포트를 만들고 너비(너비)를 500%로 설정한 다음 5페이지를 컨테이너에 로드하고 5페이지를 균등하게 전체 컨테이너에 대해 나눕니다. , 마지막으로 컨테이너의 기본 위치를 0으로 설정하고 오버플로를 숨김으로 설정하여 기본적으로 화면에 첫 번째 페이지가 표시되도록 합니다.

아아아아

CSS 스타일:

아아아아

touchstart, touchmove 및 touchend 이벤트를 등록하세요. 손가락이 화면에서 미끄러질 때 CSS3 변환을 사용하여 실시간으로 뷰포트의 위치를 ​​설정하세요. 예를 들어 두 번째 페이지를 표시하려면 뷰포트의 변환을 번역3d(100%,0)으로 설정하세요. ,0) 그게 다입니다. 여기서는translateX 대신에translate3d를 사용합니다.translate3d는 휴대폰의 GPU를 적극적으로 켜서 렌더링을 가속화하여 페이지 슬라이드를 더 부드럽게 만듭니다.

2. 주요 아이디어

화면에 손가락을 대고 손가락을 밀고 화면을 떠나면 해당 작업이 다음 이벤트를 트리거합니다.

화면에 손가락을 대세요: ontouchstart

화면 위에서 손가락 슬라이딩: ontouchmove

손가락이 화면에서 나감: ontouchend

페이지 슬라이딩을 완료하려면 터치 이벤트의 세 단계를 캡처해야 합니다.

ontouchstart: 변수 초기화, 손가락 위치 기록, 현재 시간 기록

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

ontouchmove: 현재 위치를 가져오고 화면에서 손가락의 움직임 차이 deltaX를 계산한 다음 페이지가 움직임을 따르도록 만듭니다

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

ontouchend: 손가락이 화면을 떠날 때 화면이 끝나는 페이지를 계산합니다. 먼저 화면에서 손가락의 체류 시간 deltaT를 계산합니다. deltaT<300ms이면 빠른 슬라이드로 간주되고, 그렇지 않으면 빠른 슬라이드와 느린 슬라이드의 처리가 다릅니다.

(1) 퀵 슬라이드인 경우 현재 페이지가 화면 중앙에 완전히 위치하도록 합니다. (현재 페이지에서 얼마나 슬라이드해야 하는지 계산 필요)

(2) 슬라이딩이 느린 경우 손가락이 화면에서 슬라이딩하는 거리도 판단해야 합니다. 슬라이딩 거리가 화면 너비의 50%를 초과하지 않으면 이전 페이지로 돌아가야 합니다. 현재 페이지에 있어야 합니다

/*手指放在屏幕上*/
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);

또한 현재 페이지가 몇 페이지인지 계산하고 현재 페이지 번호를 설정하는 것도 필요합니다

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


물론, 실제 작업 중에 주의해야 할 몇 가지 세부 사항은 있지만 여기서는 자세히 설명하지 않겠습니다. 소스 코드는 Git에 그대로 반영되어 있습니다. https://github.com/git -onepixel/guesture, 관심있는 학생들의 토론을 환영합니다
위 내용은 H5 단일 페이지 제스처 슬라이딩 화면 전환 원리의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!