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

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:

<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>

Im obigen Code wird .tabs verwendet, um die Registerkartenbezeichnung .content wird zum Übertragen von Tab-Inhalten verwendet, und .tab und .panel sind 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;
}

接下来，我们可以使用 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

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:hidden verwenden, 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, touchmove und touchend, um auf Fingerbewegungen zu warten. 🎜rrreee🎜Im obigen Code wählen wir zuerst das DOM-Element über die Methode querySelector aus und verwenden dann die Variablen startX und currentX zum 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].clientX und brechen mit preventDefault() ab Methode Standard-Gleitereignis. Im touchend-Ereignis berechnen wir den horizontalen Versatz der Fingerbewegung deltaX und 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, touchmove und touchend abhö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!