Comment utiliser JavaScript pour obtenir un effet de commutation par glissement du doigt sur le contenu des onglets ?

Comment utiliser JavaScript pour obtenir l'effet de commutation par glissement du doigt du contenu des onglets ?

Du côté mobile, faire glisser votre doigt pour changer le contenu de l'onglet est une méthode d'interaction courante. Grâce à JavaScript, nous pouvons facilement obtenir cet effet et offrir aux utilisateurs une expérience plus conviviale et plus fluide.

Cet article expliquera comment utiliser JavaScript pour obtenir l'effet de commutation par glissement du doigt du contenu des onglets et fournira des exemples de code spécifiques à titre de référence.

Tout d'abord, nous avons besoin d'une structure HTML de base pour créer l'onglet. Voici un exemple simple :

<div class="tabs">
  <div class="tab active" data-tab="tab1">选项卡1</div>
  <div class="tab" data-tab="tab2">选项卡2</div>
  <div class="tab" data-tab="tab3">选项卡3</div>
</div>

<div id="tab1" class="tab-content active">选项卡1的内容</div>
<div id="tab2" class="tab-content">选项卡2的内容</div>
<div id="tab3" class="tab-content">选项卡3的内容</div>

Dans l'exemple ci-dessus, nous avons un conteneur tabs, qui contient les étiquettes d'onglets de la classe tab et le contenu correspondant. L'étiquette de l'onglet sélectionné aura la classe active, et la zone de contenu aura également la classe active. tabs容器，其中包含了tab类的选项卡标签，以及对应的内容。选中的选项卡标签会带有active类，同时内容区域也会有active类。

接下来，我们需要使用JavaScript来实现手指滑动切换的效果。首先，我们需要检测用户的手势事件，并获取手指滑动的方向和距离。

const tabsContainer = document.querySelector('.tabs');
let startX = 0;
let dist = 0;

tabsContainer.addEventListener('touchstart', handleTouchStart, false);
tabsContainer.addEventListener('touchmove', handleTouchMove, false);

function handleTouchStart(event) {
  startX = event.touches[0].clientX;
}

function handleTouchMove(event) {
  dist = event.touches[0].clientX - startX;
}

在上面的代码中，我们使用touchstart事件来获取开始滑动时的触摸点位置，并使用touchmove事件来实时计算手指滑动的距离。

接下来，我们需要根据手指滑动的距离来切换选项卡。我们可以通过计算滑动距离的百分比来决定是否切换到下一个或上一个选项卡。

tabsContainer.addEventListener('touchend', handleTouchEnd, false);

function handleTouchEnd(event) {
  const threshold = 50;

  if (Math.abs(dist) > threshold) {
    if (dist > 0) {
      // 向右滑动，切换到上一个选项卡
      switchToTab('prev');
    } else {
      // 向左滑动，切换到下一个选项卡
      switchToTab('next');
    }
  }
  
  startX = 0;
  dist = 0;
}

在上面的代码中，我们设置了一个阈值threshold来判断滑动的距离是否足够切换到下一个或上一个选项卡。当滑动距离大于阈值时，根据滑动的方向调用switchToTab函数来切换选项卡。

最后，我们还需要实现switchToTab函数来真正实现选项卡的切换效果。

function switchToTab(direction) {
  const activeTab = document.querySelector('.tab.active');
  const activeContent = document.querySelector('.tab-content.active');

  const nextTab = direction === 'next' ? activeTab.nextElementSibling : activeTab.previousElementSibling;
  const nextContent = document.getElementById(nextTab.dataset.tab);

  activeTab.classList.remove('active');
  activeContent.classList.remove('active');

  nextTab.classList.add('active');
  nextContent.classList.add('active');
}

上述代码中，switchToTab函数会根据传入的方向参数决定切换到下一个或上一个选项卡。首先，要获取当前活动的选项卡和内容，然后根据传入的方向参数获取下一个选项卡和内容。最后，通过添加或移除active类来切换选项卡和内容的可见性。

通过上述代码的实现，我们可以轻松地实现选项卡内容的手指滑动切换效果。

总结：
通过使用JavaScript，我们可以很容易地实现选项卡内容的手指滑动切换效果。首先，通过检测手势事件来获取手指滑动的方向和距离。然后，根据滑动的距离来判断是否切换选项卡。最后，通过添加或移除active

Ensuite, nous devons utiliser JavaScript pour obtenir l'effet de commutation par glissement du doigt. Tout d'abord, nous devons détecter l'événement gestuel de l'utilisateur et obtenir la direction et la distance de glissement du doigt.

rrreee

Dans le code ci-dessus, nous utilisons l'événement touchstart pour obtenir la position du point de contact lorsque nous commençons à glisser, et utilisons l'événement touchmove pour calculer la distance du doigt glisser en temps réel. 🎜🎜Ensuite, nous devons changer d'onglet en fonction de la distance de glissement de notre doigt. Nous pouvons décider de passer à l'onglet suivant ou précédent en calculant le pourcentage de la distance de glissement. 🎜rrreee🎜Dans le code ci-dessus, nous définissons un seuil threshold pour déterminer si la distance de glissement est suffisante pour passer à l'onglet suivant ou précédent. Lorsque la distance de glissement est supérieure au seuil, la fonction switchToTab est appelée selon le sens de glissement pour changer d'onglet. 🎜🎜Enfin, nous devons également implémenter la fonction switchToTab pour véritablement réaliser l'effet de changement d'onglet. 🎜rrreee🎜Dans le code ci-dessus, la fonction switchToTab décidera de passer à l'onglet suivant ou précédent en fonction du paramètre de direction transmis. Tout d’abord, vous souhaitez obtenir l’onglet et le contenu actuellement actifs, puis obtenir l’onglet et le contenu suivants en fonction du paramètre de direction transmis. Enfin, basculez la visibilité des onglets et du contenu en ajoutant ou en supprimant la classe active. 🎜🎜Grâce à la mise en œuvre du code ci-dessus, nous pouvons facilement obtenir l'effet de commutation par glissement du doigt du contenu des onglets. 🎜🎜Résumé :
En utilisant JavaScript, nous pouvons facilement obtenir l'effet de commutation par glissement du doigt du contenu des onglets. Tout d’abord, obtenez la direction et la distance du glissement du doigt en détectant les événements gestuels. Ensuite, déterminez s’il faut changer d’onglet en fonction de la distance de glissement. Enfin, basculez la visibilité des onglets et du contenu en ajoutant ou en supprimant la classe active. 🎜🎜J'espère que cet article vous aidera à comprendre et à réaliser l'effet du changement de contenu d'un onglet en faisant glisser votre doigt. Si vous avez des questions ou avez besoin d'aide supplémentaire, n'hésitez pas à nous les poser. 🎜

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!