Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor jari kandungan tab sambil mengehadkannya kepada bekas?

Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor jari kandungan tab sambil mengehadkannya kepada bekas?

Tab ialah reka letak halaman web biasa yang boleh bertukar untuk memaparkan kandungan berbeza di kawasan yang sama. Berbanding dengan kaedah pensuisan klik tradisional, kesan pensuisan gelongsor jari adalah lebih mesra dan intuitif pada peranti mudah alih. Artikel ini akan memperkenalkan cara menggunakan JavaScript untuk melaksanakan kesan pensuisan gelongsor jari kandungan tab dan mengehadkannya kepada bekas.

Pertama, kita memerlukan struktur HTML untuk mengehoskan kandungan tab. Katakan tab kami mempunyai tiga label, setiap label sepadan dengan kawasan kandungan, struktur HTML boleh seperti berikut:

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

Dalam kod di atas, .tabs digunakan untuk membawa Untuk label tab, .content digunakan untuk membawa kandungan tab dan .tab dan .panel ialah label dan kandungan tab tertentu. .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

Seterusnya, kita perlu menggunakan CSS untuk menggayakan bekas tab, termasuk saiz bekas, gaya label tab dan gaya kawasan kandungan. Untuk mencapai kesan gelongsor jari, kita juga perlu menggunakan overflow: hidden untuk menyembunyikan kandungan di luar skop bekas. Gaya CSS boleh kelihatan seperti ini: #🎜🎜#rrreee#🎜🎜#Seterusnya, kita boleh menggunakan JavaScript untuk melaksanakan kesan pensuisan slaid jari dan mengehadkannya kepada bekas. Kami menggunakan acara touchstart, touchmove dan touchend untuk mendengar operasi gelongsor jari. #🎜🎜#rrreee#🎜🎜#Dalam kod di atas, kami mula-mula memilih elemen DOM melalui kaedah querySelector dan kemudian menggunakan pembolehubah startX dan currentX Untuk merakam absis permulaan dan semasa apabila jari meluncur. Dalam acara touchstart, kami menggunakan event.touches[0].clientX untuk mendapatkan abscissa apabila jari mula meluncur. Dalam acara touchmove, kami memperoleh abscissa semasa jari melalui event.touches[0].clientX dan membatalkan menggunakan preventDefault() kaedah Peristiwa gelongsor lalai. Dalam acara touchend, kami mengira offset mendatar bagi slaid jari deltaX dan menentukan sama ada untuk menukar tab berdasarkan ambang ambang . Akhir sekali, kami bertukar kepada tab dan kandungan yang betul dengan memanipulasi sifat transform gaya tab dan kawasan kandungan. #🎜🎜##🎜🎜#Untuk kod sampel lengkap, sila rujuk pautan berikut:
[https://codepen.io/](https://codepen.io/)#🎜🎜##🎜🎜 #Ringkasnya Seperti yang dinyatakan di atas, kami boleh menggunakan JavaScript untuk melaksanakan kesan pensuisan gelongsor jari kandungan tab dan mengehadkannya kepada bekas. Dengan mendengar acara touchstart, touchmove dan touchend, kami dapat merealisasikan fungsi menukar tab dengan gelongsor jari dan mengehadkan gelongsor dalam bekas melalui gaya CSS Di Dalam. Jenis interaksi ini lebih mesra dan intuitif pada peranti mudah alih, meningkatkan pengalaman pengguna. #🎜🎜#

Atas ialah kandungan terperinci Bagaimana untuk menggunakan JavaScript untuk mencapai kesan pensuisan gelongsor jari kandungan tab sambil mengehadkannya kepada bekas?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!