如何做一個簡單的手機端頁面的翻頁？

第一步：創建移動端頁面內 HTML + CSS 【注】可用彈性佈局 但需要注意的是 外層盒子的定位

第二步： 思考問題 要實現怎樣的效果？

1. 手指滑動時觸發事件【左右】兩個方向

2.點擊footer部分的下標實現切換效果

3.點擊footer部分的下標實現下標顏色變化

第三步；編寫JS代碼

添加監聽事件

document.addEventListener('DOMContentLoaded',function(){

創建一個數組用於調用數組屬性值 或者 方便【數值】的更改

【注】可以用數組 /對象 但對象更方便我們的使用

var postion = {

startX:0,

startY:0,

endX:0,

endY:0,

baseMoveX: window.innerHeight / 3,

index:1

}

獲取頁面元素 比不可少的一個步驟

var tab2 = document.getElementsByClassName('tab2')[0];//獲取到ul 思路： 用ul定位來實現頁面的切換 （ul的寬度設置成 innerWind * 4）

var li2 = document.getElementsByClassName('li2');//索引值不確定 且不寫先

var tab3 = document.querySelector('#tab3');

var li3 = document.querySelectorAll('.li3');

li3[0].style.color = '#58bc58';//設置默認的第一個下標的顏色

封裝一個函數用於清空下標 的顏色

function delite(){

for(var i = 0;i < li3.length; i++){

li3[i].style.color = '';

}

}

手指事件

【注】 這裡的原理和拖拽一抹一樣 （手指按下和 手指移動是 時 必須給給記錄 光標位置）

手指移動到位置上時候觸發 記錄鼠標移動座標

tab2.addEventListener('touchstart',function(e){

postion.startX = e.touches[0].clientX;

postion.startY = e.touches[0].clientY;

})

手指移動位置胡時候觸發 記錄鼠標移動座標

tab2.addEventListener('touchmove',function(en){

postion.endX = en.touches[0].clientX;

postion.endY = en.touches[0].clientY;

move();//當手指滑動時觸發函數 改變ul的定位

})

手指移開的時候定位

tab2.addEventListener('touchend',function(vent){

move(true);//手指鬆開時調用調用函（函數用於判斷 ：滑動的距離是否超過絕對值 1.超過 (滑動到下一頁) 2.不超過 (位置定位在當前頁)）

})

function move(_end){

var x = postion.startX - postion.endX;

var y = postion.startY - postion.endY;