Maison >interface Web >js tutoriel >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
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 :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!