JavaScript を使用して、コンテナーに限定しながらタブ コンテンツの指スライドによる切り替え効果を実現するにはどうすればよいですか?

JavaScript を使用して、コンテナーに限定しながらタブ コンテンツの指スライドによる切り替え効果を実現するにはどうすればよいですか?

タブは、同じ領域に異なるコンテンツを表示するように切り替えることができる一般的な Web ページ レイアウトです。従来のクリック切り替え方式と比較して、指をスライドさせる切り替え効果は、モバイルデバイス上でよりフレンドリーで直感的です。この記事では、JavaScriptを使用してタブコンテンツの指スライド切り替え効果を実装し、コンテナに限定する方法を紹介します。

まず、タブのコンテンツをホストするための HTML 構造が必要です。タブに 3 つのラベルがあり、各ラベルがコンテンツ領域に対応すると仮定します。HTML 構造は次のようになります。

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

上記のコードでは、.tabs がタブを運ぶために使用されます。 label 、 .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 イベントをリッスンすることで、指のスライドによるタブの切り替え機能を実装したり、CSS スタイルを通じてコン​​テナ内のスライドを制限したりできます。このタイプのインタラクションは、モバイル デバイス上でよりフレンドリーかつ直感的になり、ユーザー エクスペリエンスが向上します。

以上がJavaScript を使用して、コンテナーに限定しながらタブ コンテンツの指スライドによる切り替え効果を実現するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。