移動端左右滑動切換頁面效果完整代碼(純JavaScript)
一.介紹左右滑動的重要性
移動端左右滑動效果是一種常見的用戶界面交互方式，它能夠提供流暢的用戶體驗并增強(qiáng)應(yīng)用的直觀性。以下是一些實現(xiàn)移動端左右滑動效果的場景和方法：
頁面切換：在移動端應(yīng)用中，左右滑動可以用來在不同的頁面或視圖之間切換。這種效果可以用于圖像畫廊、故事講述或?qū)Ш讲藛蔚葓鼍啊?/p>
列表滑動：在長列表中，用戶可以通過左右滑動來瀏覽不同的列表項。這種滑動效果可以提高用戶在瀏覽大量數(shù)據(jù)時的效率。
卡片式布局：在卡片式布局中，左右滑動可以幫助用戶在不同的卡片之間切換，每個卡片代表一個獨(dú)立的信息塊或功能模塊。
彈出菜單：移動端的彈出菜單或側(cè)邊欄可以通過左右滑動來顯示或隱藏，為用戶提供更多的操作選項或信息。
過渡動畫：在Vue中，可以使用
transition組件來實現(xiàn)左右滑動的過渡動畫。例如，可以通過監(jiān)聽觸摸事件來捕捉用戶的滑動動作，并使用CSS過渡動畫來實現(xiàn)平滑的頁面切換效果。滑動庫：如果需要快速實現(xiàn)滑動效果，并且不需要過多的定制化，可以考慮使用第三方滑動庫，如Swiper、Hammer.js等。這些庫提供了豐富的API和更穩(wěn)定的體驗。
自定義滑動動畫：開發(fā)者可以根據(jù)具體需求，使用CSS和JavaScript來實現(xiàn)自定義的滑動動畫效果。這包括定義動畫樣式、監(jiān)聽觸摸事件以及處理滑動邏輯。
性能優(yōu)化：在實際項目中，還需要考慮性能優(yōu)化，如使用
keep-alive來緩存頁面，減少頁面的重復(fù)渲染，以及使用防抖或節(jié)流技術(shù)來避免頻繁觸發(fā)事件。
通過這些方法，開發(fā)者可以在移動端應(yīng)用中實現(xiàn)左右滑動效果，提升用戶的交互體驗。
二、實現(xiàn)的思路
第一步：事件監(jiān)聽
在移動端實現(xiàn)滑動效果，需要監(jiān)聽三個關(guān)鍵的觸摸事件：
touchStart：當(dāng)用戶開始觸摸屏幕時觸發(fā)。touchMove：當(dāng)用戶在屏幕上移動手指時觸發(fā)。touchEnd：當(dāng)用戶抬起手指，結(jié)束觸摸操作時觸發(fā)。
第二步：事件處理邏輯
接下來，我們需要明確在每個事件觸發(fā)時應(yīng)該執(zhí)行的操作：
touchStart事件：- 記錄觸摸開始時的坐標(biāo)（
startX）。 - 初始化滑動距離（
distanceX）為0。 - 重置滑動容器的初始位置。
- 設(shè)置一個標(biāo)志（
isMove）來跟蹤是否開始滑動。 - 代碼:
//按下 function handleTouchStart(e) { startX = e.touches[0].clientX; console.log(startX); //當(dāng)前按下的位置 }
- 記錄觸摸開始時的坐標(biāo)（
touchMove事件：- 獲取當(dāng)前觸摸點(diǎn)的坐標(biāo)（
currentX）。 - 計算滑動距離（
distanceX）為當(dāng)前坐標(biāo)與起始坐標(biāo)的差值。 - 根據(jù)滑動距離更新滑動容器的位置。
- 判斷滑動方向，如果超出邊界則限制滑動范圍。
- 如果滑動距離超過一定閾值，可以設(shè)置一個標(biāo)志來觸發(fā)頁面切換。
- 代碼：
//按下移動 function handleTouchMove(e) { const moveX = e.touches[0].clientX; // console.log(moveX); const movedDistance = Math.abs(moveX - startX); // 計算移動的距離 console.log(movedDistance); // 如果移動的距離小于80，不進(jìn)行更新位置的操作 if (movedDistance < 80) { return; } //如果 moveX 大于 startX 就是往右滑動 并且頁數(shù)為0 就不行 ,或者 moveX 小于 startX 并且頁數(shù)是最后一頁頁不行 if ((moveX > startX && pageIndex === 0) || (moveX < startX && pageIndex === oSliderItems.length - 1)) { return } distanceX = moveX - startX; setTranslateX(-pageWith * pageIndex + distanceX) isMove = true; }
- 獲取當(dāng)前觸摸點(diǎn)的坐標(biāo)（
touchEnd事件：- 判斷滑動距離是否超過頁面切換的閾值。
- 如果超過閾值，執(zhí)行頁面切換邏輯。
- 如果未超過閾值，執(zhí)行回彈邏輯，將滑動容器恢復(fù)到初始位置。
- 重置滑動相關(guān)的變量，為下一次滑動做準(zhǔn)備。
//松開 function handleTouchEnd() { if (isMove) { if (Math.abs(distanceX) >= pageWith / 3) { if (distanceX > 0) { pageIndex--; } if (distanceX < 0) { pageIndex++; } } setTranslateX(- pageIndex * pageWith) } startX = 0; distanceX = 0; isMove = false } function setTranslateX(tranX) { oScrollWrapper.style.transition = 'all .1s' oScrollWrapper.style.transform = `translate(${tranX}px)` }
注意：在touchMove 事件，中需要判斷一下，往右或者往左滑動的距離是否大于50-80，這樣可以避免如果頁面是一個很長的page，往下滾動就會左右抖動，影響用戶體驗。
-----全部代碼-以及效果展示 （JavaScript）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>demo</title>
<script>
document.documentElement.style.fontSize =
document.documentElement.clientWidth / 37.5 + 'px'
</script>
<style>
body {
margin: 0;
}
html,
body,
#app {
height: 100%;
}
div {
display: flex;
width: 100%;
flex-direction: column;
}
.slider-page {
position: relative;
height: 100%;
overflow: hidden;
}
.scroll-wrapper {
position: absolute;
width: 400vw;
height: 100%;
flex-direction: row;
}
.slider-item {
width: 100vw;
height: 100%;
flex: 1;
}
.slider-item:nth-child(1) {
background-color: rgb(247, 150, 150);
}
.slider-item:nth-child(2) {
background-color: rgb(123, 255, 0);
}
.slider-item:nth-child(3) {
background-color: rgb(0, 255, 238);
}
.slider-item:nth-child(4) {
background-color: rgb(255, 0, 195);
}
.slider-item .inner {
height: 100%;
justify-content: center;
align-items: center;
font-size: 50px;
}
</style>
</head>
<body>
<div id="app">
<div class="slider-page">
<div class="scroll-wrapper">
<div class="slider-item">
<div class="inner">Page1</div>
</div>
<div class="slider-item">
<div class="inner">Page2</div>
</div>
<div class="slider-item">
<div class="inner">Page3</div>
</div>
<div class="slider-item">
<div class="inner">Page4</div>
</div>
</div>
</div>
</div>
<script>
//oSlidePage 最大的頁面盒子
//oScrollWrapper內(nèi)部的盒子總寬
// oSliderItems 每個小盒子
// pageWith 頁面寬度
const oSlidePage = document.querySelector('.slider-page'),
oScrollWrapper = oSlidePage.querySelector('.scroll-wrapper'),
oSliderItems = oScrollWrapper.querySelectorAll('.slider-item'),
pageWith = oSlidePage.offsetWidth;
console.log('當(dāng)前視口的寬度', pageWith);
// 移動端事件 touchstart touchmove touchend
let startX = 0,
pageIndex = 0,
distanceX = 0
isMove = false;
//初始化
const init = () => {
bindEvent()
}
function bindEvent() {
oScrollWrapper.addEventListener('touchstart', handleTouchStart, false)
oScrollWrapper.addEventListener('touchmove', handleTouchMove, false)
oScrollWrapper.addEventListener('touchend', handleTouchEnd, false)
}
//按下
function handleTouchStart(e) {
startX = e.touches[0].clientX;
console.log(startX);
}
//按下移動
function handleTouchMove(e) {
const moveX = e.touches[0].clientX;
// console.log(moveX);
const movedDistance = Math.abs(moveX - startX); // 計算移動的距離
console.log(movedDistance);
// 如果移動的距離小于80，不進(jìn)行更新位置的操作
if (movedDistance < 80) {
return;
}
//如果 moveX 大于 startX 就是往右滑動 并且頁數(shù)為0 就不行 ,或者 moveX 小于 startX 并且頁數(shù)是最后一頁頁不行
if ((moveX > startX && pageIndex === 0) ||
(moveX < startX && pageIndex === oSliderItems.length - 1)) {
return
}
distanceX = moveX - startX;
setTranslateX(-pageWith * pageIndex + distanceX)
isMove = true;
}
//松開
function handleTouchEnd() {
if (isMove) {
if (Math.abs(distanceX) >= pageWith / 3) {
if (distanceX > 0) {
pageIndex--;
}
if (distanceX < 0) {
pageIndex++;
}
}
setTranslateX(- pageIndex * pageWith)
}
startX = 0;
distanceX = 0;
isMove = false
}
function setTranslateX(tranX) {
oScrollWrapper.style.transition = 'all .1s'
oScrollWrapper.style.transform = `translate(${tranX}px)`
}
init()
</script>
</body>
</html>
擴(kuò)展：實現(xiàn)滑動效果并結(jié)合tab切換卡，實現(xiàn)思路如下：
1. 設(shè)計布局
首先，設(shè)計你的tab切換卡的布局。這通常包括一個頂部的tab欄和下方的內(nèi)容區(qū)域。每個tab對應(yīng)內(nèi)容區(qū)域中的一個頁面。
2. 使用變量控制高亮
使用一個變量（如pageIndex）來跟蹤當(dāng)前激活的tab。這個變量將用于控制tab欄中哪個tab是高亮顯示的。
3. 實現(xiàn)滑動邏輯
在滑動邏輯中，除了更新滑動容器的位置外，還需要根據(jù)滑動的距離來更新pageIndex。當(dāng)用戶滑動到新頁面時，相應(yīng)的tab應(yīng)該被高亮。
4. 監(jiān)聽滑動事件
在touchMove和touchEnd事件中，根據(jù)滑動的距離來更新pageIndex，并相應(yīng)地更新tab欄的高亮狀態(tài)。
總結(jié)
到此這篇關(guān)于移動端左右滑動切換頁面效果的文章就介紹到這了,更多相關(guān)js移動端左右滑動切換內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的
發(fā)兩個小東西，ASP/PHP 學(xué)習(xí)工具。 用JavaScript寫的...2007-04-04
這篇文章主要為大家詳細(xì)介紹了用javascript實現(xiàn)放大鏡效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了js實現(xiàn)按鈕顏色漸變動畫效果的方法,涉及javascript鼠標(biāo)事件及頁面表單元素樣式的動態(tài)操作技巧,需要的朋友可以參考下2015-08-08
本文主要介紹了原生JS實現(xiàn)幻燈片的示例代碼，具有很好的參考價值，下面跟著小編一起來看下吧2017-02-02
這篇文章主要介紹了Web3.js查詢以太幣和代幣余額以及轉(zhuǎn)賬,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-09-09
這篇文章主要為大家分享了我們有必要知道的25個JavaScript面試題。想要順利通過面試的朋友可以參考一下2015-12-12
typeof 返回變量的類型字符串值 、其中包括 “object”、“number”、“string”、“undefined”、“boolean”。這篇文章重點(diǎn)給大家介紹ECMAScript typeof用法，需要的朋友參考下2018-07-07
JavaScript原始數(shù)據(jù)類型Symbol的用法詳解
Symbol是ES6中引入的一種新的基本數(shù)據(jù)類型，用于表示一個獨(dú)一無二的值。它是JavaScript中的第七種數(shù)據(jù)類型。本文將詳細(xì)講講Symbol的使用，需要的可以參考一下2022-11-11
layui select 禁止點(diǎn)擊的實現(xiàn)方法
今天小編就為大家分享一篇layui select 禁止點(diǎn)擊的實現(xiàn)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家詳細(xì)介紹了js+html+css實現(xiàn)手動輪播和自動輪播效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-12-12