자바스크립트 단일 페이지 제스처 슬라이딩 화면 전환 원리에 대한 자세한 설명_javascript 기술

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 변환을 사용하여 실시간으로 뷰포트의 위치를 ​​설정하세요. 예를 들어 두 번째 페이지를 표시하려면 뷰포트의 변환을 번역3d(100)으로 설정하세요. %,0 ,0) 여기에서는 TranslateX 대신에 Translate3d를 사용합니다. Translate3d는 휴대폰의 GPU를 적극적으로 켜서 렌더링을 가속화하여 페이지 슬라이드를 더 부드럽게 만듭니다.

2. 주요 아이디어

화면에 손가락을 대고 슬라이딩한 후 화면을 떠나는 완전한 작업 프로세스입니다. 해당 작업은 다음 이벤트를 트리거합니다.

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

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

화면에서 손가락 떼기: ontouchend

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

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: 현재 위치를 가져오고 화면에서 손가락 움직임의 차이 deltaX를 계산한 다음 페이지가 움직임을 따르도록 합니다

/*手指在屏幕上滑动，页面跟随手指移动*/
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&#63;"right":"left"; //判断手指滑动的方向
 }
}.bind(this),false);

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

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

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

/*手指离开屏幕时，计算最终需要停留在哪一页*/
document.addEventListener("touchend",function(e){
 e.preventDefault();
 var translate = 0;
 //计算手指在屏幕上停留的时间
 var deltaT = new Date().getTime() - startT;
 if (isMove){ //发生了左右滑动
  //使用动画过渡让页面滑动到最终的位置
  viewport.style.webkitTransition = "0.3s ease -webkit-transform";
  if(deltaT < 300){ //如果停留时间小于300ms,则认为是快速滑动，无论滑动距离是多少，都停留到下一页
   translate = direction == 'left'&#63;
   currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
   //如果最终位置超过边界位置，则停留在边界位置
   translate = translate > 0 &#63; 0 : translate; //左边界
   translate = translate < maxWidth &#63; maxWidth : translate; //右边界
  }else {
   //如果滑动距离小于屏幕的50%，则退回到上一页
   if (Math.abs(moveLength)/pageWidth < 0.5){
    translate = currentPosition-moveLength;
   }else{
    //如果滑动距离大于屏幕的50%，则滑动到下一页
    translate = direction == 'left'&#63;
    currentPosition-(pageWidth+moveLength):currentPosition+pageWidth-moveLength;
    translate = translate > 0 &#63; 0 : translate;
    translate = translate < maxWidth &#63; maxWidth : translate;
   }
  }
  //执行滑动，让页面完整的显示到屏幕上
  this.transform.call(viewport,translate);
 }
}.bind(this),false);

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

//计算当前的页码
pageNow = Math.round(Math.abs(translate) / pageWidth) + 1;

setTimeout(function(){
 //设置页码，DOM操作需要放到子线程中，否则会出现卡顿
 this.setPageNow();
}.bind(this),100);

물론 실제 작업 중에 주의해야 할 몇 가지 세부 사항은 코드에 모두 반영되어 있습니다. Git으로: https:/ /github.com/git-onepixel/guesture, 관심 있는 학생들이 함께 토론할 수 있습니다.