Maison > Article > interface Web > Comment utiliser JavaScript pour obtenir un effet de commutation coulissante au toucher du doigt du contenu des onglets ?

Comment utiliser JavaScript pour obtenir un effet de commutation coulissante au toucher du doigt du contenu des onglets ?

PHPzoriginal: 2023-10-20 08:47:061357parcourir

如何使用 JavaScript 实现选项卡内容的手指触摸滑动切换效果？

Comment utiliser JavaScript pour implémenter l'effet de commutation coulissante au toucher du doigt du contenu des onglets ?

Depuis la popularité des appareils mobiles, la demande des utilisateurs en matière d’opérations tactiles est devenue de plus en plus élevée. Cependant, il n'est pas facile d'obtenir un effet de commutation coulissante au toucher du doigt dans le développement Web. Cet article explique comment utiliser JavaScript pour obtenir l'effet de commutation coulissante par effleurement du contenu des onglets et fournit des exemples de code spécifiques.

Avant de commencer, nous devons connaître quelques connaissances de base. Tout d'abord, afin d'obtenir l'effet de commutation coulissante au toucher du doigt, nous devons surveiller les événements tactiles du doigt de l'utilisateur, y compris le début du toucher du doigt, le mouvement du toucher du doigt, la fin du toucher du doigt et d'autres événements. Deuxièmement, nous devons obtenir des informations pertinentes sur l’événement tactile, telles que la position de départ du toucher, la distance de déplacement du toucher et d’autres informations. Enfin, nous devons juger l'intention d'opération de l'utilisateur sur la base des informations de l'événement tactile et la gérer en conséquence.

Ce qui suit est un exemple simple qui montre comment utiliser JavaScript pour implémenter l'effet de commutation coulissante au toucher du doigt du contenu de l'onglet :

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>手指触摸滑动切换选项卡内容</title>
    <style>
        .tab-content {
            height: 200px;
            overflow: hidden;
        }

        .tab-panel {
            width: 100%;
            height: 100%;
            display: flex;
        }
    </style>
</head>
<body>
    <div class="tab-content">
        <div class="tab-panel">
            <div class="tab-item">选项卡1</div>
            <div class="tab-item">选项卡2</div>
            <div class="tab-item">选项卡3</div>
        </div>
    </div>

    <script>
        // 获取相关元素
        var tabContent = document.querySelector('.tab-content');
        var tabPanel = document.querySelector('.tab-panel');

        // 初始化触摸事件参数
        var touchStartX = 0;
        var touchEndX = 0;
        var currentIndex = 0;
        var itemWidth = tabPanel.offsetWidth / 3;

        // 监听手指触摸开始事件
        tabPanel.addEventListener('touchstart', function (e) {
            touchStartX = e.touches[0].clientX;
        });

        // 监听手指触摸移动事件
        tabPanel.addEventListener('touchmove', function (e) {
            touchEndX = e.touches[0].clientX;
        });

        // 监听手指触摸结束事件
        tabPanel.addEventListener('touchend', function () {
            // 计算触摸距离
            var deltaX = touchEndX - touchStartX;

            // 判断用户操作意图
            if (deltaX > itemWidth / 3) {
                // 向右滑动
                currentIndex = (currentIndex === 0) ? 0 : currentIndex - 1;
            } else if (deltaX < -itemWidth / 3) {
                // 向左滑动
                currentIndex = (currentIndex === 2) ? 2 : currentIndex + 1;
            }

            // 更新选项卡内容的显示
            tabPanel.style.transform = 'translateX(-' + currentIndex * itemWidth + 'px)';
        });

    </script>
</body>
</html>

Dans le code ci-dessus, nous obtenons d'abord les éléments pertinents, y compris le conteneur du contenu de l'onglet (tabContent ) et options Panneau de contenu de la carte (tabPanel). Nous initialisons ensuite les paramètres requis pour l'événement tactile, y compris la position de début du toucher (touchStartX), la position de fin du toucher (touchEndX), l'index de l'onglet actuellement sélectionné (currentIndex) et la largeur d'un seul onglet (itemWidth).

Ensuite, nous surveillons les événements tels que le début du toucher du doigt, le mouvement du toucher du doigt et la fin du toucher du doigt, et effectuons les opérations correspondantes dans la fonction de traitement des événements. Plus précisément, nous enregistrons la position de départ dans l'événement de début de contact avec le doigt, enregistrons la position finale dans l'événement de déplacement par contact avec le doigt, calculons la distance tactile dans l'événement de fin de contact avec le doigt, déterminons l'intention d'opération de l'utilisateur et mettons à jour l'effet d'affichage de l'onglet. contenu.

Avec l'exemple de code ci-dessus, nous pouvons obtenir l'effet de commutation coulissante par effleurement du doigt du contenu de l'onglet. Lorsque l'utilisateur fait glisser l'écran avec son doigt, le contenu de l'onglet change pour suivre le glissement du doigt. Cet effet interactif facilite la navigation des utilisateurs dans le contenu des onglets et améliore l'expérience utilisateur.

Bien sûr, l'exemple de code ci-dessus n'implémente que l'effet de commutation coulissant tactile le plus basique, et vous pouvez l'étendre et l'optimiser en fonction de vos propres besoins. Dans le même temps, afin de garantir la compatibilité, vous devrez peut-être également ajouter du code de traitement de compatibilité du navigateur.

En résumé, bien qu'il existe un certain degré de complexité dans la mise en œuvre de l'effet de commutation coulissante tactile du contenu des onglets, grâce à une surveillance et des opérations raisonnables des événements, nous pouvons remplir cette exigence via JavaScript. J'espère que les exemples de code de cet article pourront vous aider à comprendre et à mettre en œuvre le glissement tactile pour changer de contenu d'onglet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript 事件

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment implémenter la fonction de lecture automatique des images carrousel en JavaScript ?Article suivant：Comment implémenter la fonction de lecture automatique des images carrousel en JavaScript ?

Articles Liés

Voir plus