最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

移動端左右滑動切換頁面效果完整代碼(純JavaScript)

 更新時間：2025年03月26日 09:01:33   作者：七條小鯉魚LY  
這篇文章主要介紹了如何通過原生JavaScript實現(xiàn)移動端左右滑動效果,并結(jié)合tab切換卡功能,文中通過代碼介紹的非常詳細,需要的朋友可以參考下

一.介紹左右滑動的重要性

移動端左右滑動效果是一種常見的用戶界面交互方式，它能夠提供流暢的用戶體驗并增強應(yīng)用的直觀性。以下是一些實現(xiàn)移動端左右滑動效果的場景和方法：

  • 頁面切換：在移動端應(yīng)用中，左右滑動可以用來在不同的頁面或視圖之間切換。這種效果可以用于圖像畫廊、故事講述或?qū)Ш讲藛蔚葓鼍啊?/p>

  • 列表滑動：在長列表中，用戶可以通過左右滑動來瀏覽不同的列表項。這種滑動效果可以提高用戶在瀏覽大量數(shù)據(jù)時的效率。

  • 卡片式布局：在卡片式布局中，左右滑動可以幫助用戶在不同的卡片之間切換，每個卡片代表一個獨立的信息塊或功能模塊。

  • 彈出菜單：移動端的彈出菜單或側(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)前按下的位置
        }

  • touchMove 事件：

    • 獲取當(dāng)前觸摸點的坐標(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，不進行更新位置的操作
            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;
        }

  • 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，不進行更新位置的操作
            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>

擴展：實現(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)文章

最新評論

松潘县| 遵义县| 木兰县| 桐庐县| 苗栗市| 昌宁县| 泰宁县| 建瓯市| 宁蒗| 司法| 启东市| 长岭县| 泽普县| 怀宁县| 莒南县| 松滋市| 辽中县| 霍城县| 余干县| 金秀| 昭平县| 武宣县| 常熟市| 哈巴河县| 西畴县| 关岭| 眉山市| 娄底市| 安远县| 余姚市| 凌源市| 龙山县| 青铜峡市| 东丰县| 宁陕县| 西昌市| 怀远县| 荥经县| 长武县| 嵩明县| 峨山|