Wie kann ich mit JavaScript den Finger-Sliding-Switching-Effekt des Tab-Inhalts erzielen und ihn gleichzeitig auf den Container beschränken?-js-Tutorial-php.cn

如何使用 JavaScript 实现选项卡内容的手指滑动切换效果同时限制在容器内？

Wie verwende ich JavaScript, um den Effekt des Wechselns des Tab-Inhalts durch Fingerschieben zu implementieren und ihn gleichzeitig auf den Container zu beschränken?

Tab ist ein gängiges Webseitenlayout, das wechseln kann, um unterschiedliche Inhalte im selben Bereich anzuzeigen. Im Vergleich zur herkömmlichen Klick-Umschaltmethode ist der Finger-Schiebe-Umschalteffekt auf Mobilgeräten benutzerfreundlicher und intuitiver. In diesem Artikel wird erläutert, wie Sie mithilfe von JavaScript den Effekt des Fingergleitens beim Wechseln von Tab-Inhalten implementieren und ihn auf den Container beschränken.

Zuerst benötigen wir eine HTML-Struktur, um den Tab-Inhalt zu hosten. Angenommen, unsere Registerkarte hat drei Beschriftungen. Jede Beschriftung entspricht einem Inhaltsbereich. Die HTML-Struktur kann wie folgt aussehen:

  标签1
 标签2
 标签3
 
  内容1
 内容2
 内容3

Nach dem Login kopieren

Im obigen Code wird.tabsverwendet, um die Registerkartenbezeichnung.contentwird zum Übertragen von Tab-Inhalten verwendet, und.tabund.panelsind spezifische Tab-Beschriftungen und -Inhalte..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; }

Nach dem Login kopieren

接下来，我们可以使用 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}%)`; });

Nach dem Login kopieren

在上述代码中，我们首先通过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

Als nächstes müssen wir CSS verwenden, um den Tab-Container zu formatieren, einschließlich Containergröße, Tab-Beschriftungsstil und Inhaltsbereichsstil. Um den Fingergleiteffekt zu erzielen, müssen wir außerdem overflow:hiddenverwenden, um Inhalte außerhalb des Containerbereichs auszublenden. Der CSS-Stil kann so aussehen: rrreee Als nächstes können wir JavaScript verwenden, um den Finger-Slide-Switching-Effekt zu implementieren und ihn auf den Container zu beschränken. Wir verwenden die Ereignisse touchstart, touchmoveund touchend, um auf Fingerbewegungen zu warten. rrreeeIm obigen Code wählen wir zuerst das DOM-Element über die Methode querySelectoraus und verwenden dann die Variablen startXund currentXzum Aufzeichnen die Bewegung des Fingers beim Gleiten. Start- und Stromabszisse. Im touchstart-Ereignis verwenden wir event.touches[0].clientX, um die Abszisse zu erhalten, wenn der Finger zu gleiten beginnt. Im touchmove-Ereignis ermitteln wir die aktuelle Abszisse des Fingers über event.touches[0].clientXund brechen mit preventDefault()ab Methode Standard-Gleitereignis. Im touchend-Ereignis berechnen wir den horizontalen Versatz der Fingerbewegung deltaXund bestimmen anhand des Schwellenwerts von threshold, ob die Tabs gewechselt werden sollen. Schließlich wechseln wir zum richtigen Tab und Inhalt, indem wir die transform-Eigenschaften des Tab-Stils und des Inhaltsbereichs manipulieren. Den vollständigen Beispielcode finden Sie unter folgendem Link:
[https://codepen.io/](https://codepen.io/)Zusammenfassend können wir JavaScript verwenden, um Tab-Inhalte zu implementieren Durch Streichen mit dem Finger wird der Effekt umgeschaltet und ist auf den Container beschränkt. Indem wir die Ereignisse touchstart, touchmoveund touchendabhören, können wir die Funktion des Wechselns von Tabs durch Fingergleiten realisieren und das Gleiten begrenzen Container durch CSS-Stile im Inneren. Diese Art der Interaktion ist auf Mobilgeräten benutzerfreundlicher und intuitiver und verbessert das Benutzererlebnis.

Das obige ist der detaillierte Inhalt vonWie kann ich mit JavaScript den Finger-Sliding-Switching-Effekt des Tab-Inhalts erzielen und ihn gleichzeitig auf den Container beschränken?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!