Comment utiliser JavaScript pour obtenir l'effet de commutation par glissement du doigt du contenu de l'onglet tout en le limitant au conteneur ?

Comment utiliser JavaScript pour implémenter l'effet de commutation par glissement du doigt du contenu de l'onglet tout en le limitant au conteneur ?

Tab est une mise en page de page Web courante qui peut basculer pour afficher différents contenus dans la même zone. Par rapport à la méthode traditionnelle de commutation par clic, l'effet de commutation par glissement du doigt est plus convivial et intuitif sur les appareils mobiles. Cet article explique comment utiliser JavaScript pour implémenter l'effet de commutation par glissement du doigt du contenu de l'onglet et le limiter au conteneur.

Tout d'abord, nous avons besoin d'une structure HTML pour héberger le contenu de l'onglet. Supposons que notre onglet ait trois étiquettes, chaque étiquette correspond à une zone de contenu, la structure HTML peut être la suivante :

<div class="container">
  <div class="tabs">
    <div class="tab" id="tab1">标签1</div>
    <div class="tab" id="tab2">标签2</div>
    <div class="tab" id="tab3">标签3</div>
  </div>
  <div class="content">
    <div class="panel" id="panel1">内容1</div>
    <div class="panel" id="panel2">内容2</div>
    <div class="panel" id="panel3">内容3</div>
  </div>
</div>

Dans le code ci-dessus, .tabs est utilisé pour porter l'étiquette de l'onglet, .content est utilisé pour transporter le contenu des onglets, et .tab et .panel sont des étiquettes et du contenu d'onglets spécifiques. .tabs 是用来承载选项卡标签，.content 是用来承载选项卡内容，.tab 和 .panel 是具体的选项卡标签和内容。

接下来，我们需要使用 CSS 来设置选项卡容器的样式，包括容器大小、选项卡标签的样式和内容区域的样式。为了实现手指滑动效果，我们还需要使用 overflow: hidden 来隐藏超出容器范围的内容。CSS 样式可以如下所示：

.container {
  width: 300px;
  height: 200px;
  overflow: hidden;
}

.tabs {
  display: flex;
}

.tab {
  flex: 1;
  text-align: center;
}

.content {
  width: 300%;
  display: flex;
}

.panel {
  flex: 1;
  text-align: center;
}

接下来，我们可以使用 JavaScript 来实现手指滑动切换效果以及限制在容器内。我们使用 touchstart、touchmove 和 touchend 事件来监听手指的滑动操作。

const container = document.querySelector('.container');
const tabs = document.querySelectorAll('.tab');
const panels = document.querySelectorAll('.panel');

let startX = 0;
let currentX = 0;

container.addEventListener('touchstart', (event) => {
  startX = event.touches[0].clientX;
});

container.addEventListener('touchmove', (event) => {
  event.preventDefault();
  currentX = event.touches[0].clientX;
});

container.addEventListener('touchend', () => {
  const deltaX = currentX - startX;
  const threshold = container.offsetWidth / 3;

  if (deltaX > threshold && currentIndex > 0) {
    currentIndex--;
  } else if (deltaX < -threshold && currentIndex < tabs.length - 1) {
    currentIndex++;
  }

  const translateX = -currentIndex * 100;

  tabs.forEach((tab) => tab.classList.remove('active'));
  panels.forEach((panel) => panel.classList.remove('active'));

  tabs[currentIndex].classList.add('active');
  panels[currentIndex].classList.add('active');

  container.querySelector('.content').style.transform = `translateX(${translateX}%)`;
});

在上述代码中，我们首先通过 querySelector 方法选择 DOM 元素，然后使用变量 startX 和 currentX 来记录手指滑动时的起始和当前横坐标。在 touchstart 事件中，我们通过 event.touches[0].clientX 获取手指开始滑动时的横坐标。在 touchmove 事件中，我们通过 event.touches[0].clientX 获取手指当前的横坐标，并使用 preventDefault() 方法取消默认滑动事件。在 touchend 事件中，我们计算了手指滑动的水平偏移量 deltaX，并根据 threshold 的阈值来判断是否需要切换选项卡。最后，我们通过操作选项卡样式和内容区域的 transform 属性来切换到正确的选项卡和内容。

完整的示例代码可以参考以下链接：
[https://codepen.io/](https://codepen.io/)

综上所述，我们可以使用 JavaScript 实现选项卡内容的手指滑动切换效果，并限制在容器内。通过监听 touchstart、touchmove 和 touchend

Ensuite, nous devons utiliser CSS pour styliser le conteneur d'onglets, y compris la taille du conteneur, le style d'étiquette d'onglet et le style de la zone de contenu. Afin d'obtenir l'effet de glissement du doigt, nous devons également utiliser overflow: Hidden pour masquer le contenu au-delà de la portée du conteneur. Le style CSS peut ressembler à ceci : 🎜rrreee🎜 Ensuite, nous pouvons utiliser JavaScript pour implémenter l'effet de commutation par glissement du doigt et le limiter au conteneur. Nous utilisons les événements touchstart, touchmove et touchend pour écouter les opérations de glissement des doigts. 🎜rrreee🎜Dans le code ci-dessus, nous sélectionnons d'abord l'élément DOM via la méthode querySelector, puis utilisons les variables startX et currentX pour enregistrer le mouvement du doigt lors du glissement Abscisse de départ et actuelle. Dans l'événement touchstart, nous utilisons event.touches[0].clientX pour obtenir l'abscisse lorsque le doigt commence à glisser. Dans l'événement touchmove, nous obtenons l'abscisse actuelle du doigt via event.touches[0].clientX et annulons en utilisant preventDefault() méthode Événement glissant par défaut. Dans l'événement touchend, nous calculons le décalage horizontal du glissement du doigt deltaX et déterminons s'il faut changer d'onglet en fonction du seuil de threshold . Enfin, nous passons au bon onglet et au bon contenu en manipulant les propriétés transform du style d'onglet et de la zone de contenu. 🎜🎜Pour un exemple de code complet, veuillez vous référer au lien suivant :
[https://codepen.io/](https://codepen.io/)🎜🎜En résumé, nous pouvons utiliser JavaScript pour implémenter le contenu des onglets Le glissement du doigt active l'effet et se limite au conteneur. En écoutant les événements touchstart, touchmove et touchend, nous pouvons réaliser la fonction de changement d'onglet avec le glissement du doigt, et limiter le glissement dans le conteneur via les styles CSS Inside. Ce type d'interaction est plus convivial et intuitif sur les appareils mobiles, améliorant ainsi l'expérience utilisateur. 🎜

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!