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

時間：2023-07-03 03:48:02 | 來源：網(wǎng)站運營

時間：2023-07-03 03:48:02 來源：網(wǎng)站運營

如何做一個簡單的手機端頁面的翻頁？：第一步：創(chuàng)建移動端頁面內(nèi) HTML + CSS 【注】可用彈性布局 但需要注意的是 外層盒子的定位

第二步： 思考問題 要實現(xiàn)怎樣的效果？

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

2.點擊footer部分的下標(biāo)實現(xiàn)切換效果

3.點擊footer部分的下標(biāo)實現(xiàn)下標(biāo)顏色變化

第三步；編寫JS代碼

添加監(jiān)聽事件

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

創(chuàng)建一個數(shù)組用于調(diào)用數(shù)組屬性值 或者 方便【數(shù)值】的更改

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

var postion = {

startX:0,

startY:0,

endX:0,

endY:0,

baseMoveX: window.innerHeight / 3,

index:1

}

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

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

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

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

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

li3[0].style.color = '#58bc58';//設(shè)置默認(rèn)的第一個下標(biāo)的顏色

封裝一個函數(shù)用于清空下標(biāo) 的顏色

function delite(){

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

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

}

}

手指事件

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

手指移動到位置上時候觸發(fā) 記錄鼠標(biāo)移動坐標(biāo)

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

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

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

})

手指移動位置胡時候觸發(fā) 記錄鼠標(biāo)移動坐標(biāo)

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

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

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

move();//當(dāng)手指滑動時觸發(fā)函數(shù) 改變ul的定位

})

手指移開的時候定位

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

move(true);//手指松開時調(diào)用調(diào)用函（函數(shù)用于判斷 ：滑動的距離是否超過絕對值 1.超過 (滑動到下一頁) 2.不超過 (位置定位在當(dāng)前頁)）

})

function move(_end){

var x = postion.startX - postion.endX;

var y = postion.startY - postion.endY;

滑動效果

if(postion.index < li2.length){//第一種情況==========left [用if 判斷：索引值是 1-3的時候可以 向左滑動 改變 ul的定位 【注】因為超出會造成用戶滑動出現(xiàn)空白頁面 ]

if(x > 0){//計算公式： 起點位置 - 終點位置 = x; 如果 x > 0 說明滑動的方向是左邊

//to left