Penjelasan terperinci tentang prinsip javascript satu halaman gerak isyarat skrin gelongsor kemahiran switching_javascript

Penukaran skrin gelongsor gerak isyarat satu halaman H5 dilaksanakan menggunakan peristiwa sentuhan HTML5 (Sentuh) dan animasi CSS3 (Transform, Transition) Artikel ini membincangkan secara ringkas tentang prinsip pelaksanaan dan idea utamanya.

1. Prinsip pelaksanaan

Anggapkan terdapat 5 halaman, setiap halaman menduduki 100% lebar skrin, kemudian buat port pandangan kontena DIV, tetapkan lebarnya (lebar) kepada 500%, kemudian muatkan 5 halaman ke dalam bekas, dan biarkan ini 5 Keseluruhan bekas dibahagikan sama kepada dua halaman Akhir sekali, kedudukan lalai bekas ditetapkan kepada 0 dan limpahan ditetapkan kepada tersembunyi, supaya skrin memaparkan halaman pertama secara lalai.

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

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

Daftar acara permulaan sentuh, gerakan sentuh dan akhir sentuh Apabila jari anda meluncur pada skrin, gunakan transformasi CSS3 untuk menetapkan kedudukan port pandangan dalam masa nyata Contohnya, untuk memaparkan halaman kedua, tetapkan transformasi port pandangan: translate3d(100 %,0 ,0) Di sini kami menggunakan translate3d dan bukannya translate3d boleh menghidupkan GPU telefon mudah alih untuk mempercepatkan pemaparan, menjadikan halaman slaid lebih lancar.

2. Idea utama

Ia adalah proses operasi yang lengkap daripada meletakkan jari anda pada skrin, operasi gelongsor, dan kemudian meninggalkan skrin Operasi yang sepadan akan mencetuskan peristiwa berikut:

Letak jari anda pada skrin: ontouchstart

Jari meluncur pada skrin: ontouchmove

Jari di luar skrin: ontouchend

Kita perlu menangkap tiga peringkat peristiwa sentuhan ini untuk melengkapkan gelongsor halaman:

ontouchstart: Mulakan pembolehubah, rekod lokasi jari dan rekod masa semasa

/*手指放在屏幕上*/
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: Dapatkan kedudukan semasa, kira perbezaan deltaX pergerakan jari pada skrin, dan kemudian buat halaman mengikut pergerakan

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

ontouchen: Apabila jari meninggalkan skrin, kira halaman mana skrin berakhir. Mula-mula, hitung deltaT masa tinggal jari pada skrin Jika deltaT<300ms, ia dianggap gelongsor pantas, jika tidak ia gelongsor perlahan Pemprosesan gelongsor cepat dan gelongsor perlahan adalah berbeza:

(1) Jika ia adalah slaid pantas, biarkan halaman semasa kekal sepenuhnya di tengah-tengah skrin (anda perlu mengira berapa banyak halaman semasa yang perlu diluncurkan)

(2) Jika ia gelongsor perlahan, anda juga perlu menilai jarak gelongsor jari pada skrin Jika jarak gelongsor tidak melebihi 50% daripada lebar skrin, anda perlu kembali ke halaman sebelumnya. . Jika tidak, anda perlu kekal di halaman semasa

/*手指离开屏幕时，计算最终需要停留在哪一页*/
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);

Selain itu, ia juga perlu mengira halaman mana halaman semasa dan menetapkan nombor halaman semasa

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

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

Itulah idea asas Sudah tentu, terdapat beberapa butiran yang perlu diberi perhatian semasa operasi sebenar kepada Git:

https:/ /github.com/git-onepixel/guesture, pelajar yang berminat dialu-alukan untuk berbincang bersama.