如何在 html 中创建类似 android 的滑动标签？答案

【问题标题】：How to create android like swipe tabs in html?如何在 html 中创建类似 android 的滑动标签？
【发布时间】：2023-03-08 18:57:01
【问题描述】：

如何使用 javascript/jquery 创建以下标签页？

我曾尝试使用 slick.js 进行此操作，但每次我滑动选项卡时，slick 都会将其注册为单击并加载我刚刚触摸的选项卡的内容。我怎样才能消除这种情况？

$(function() {
  'use strict';
  $('.pageFoot').slick({
    slidesToShow: 5,
    slidesToScroll: 1,
    asNavFor: '.pageContent',
    arrows: false,
    infinite: false,
    focusOnSelect: true,
    centerMode: true,
    swipeToSlide: true,
    touchThreshold: 10,
  });
  $('.pageContent').slick({
    slidesToShow: 1,
    slidesToScroll: 1,
    asNavFor: '.pageFoot',
    arrows: false,
    infinite: false,
    swipeToSlide: true,
    touchThreshold: 10
  });
});

body {
  height: 100vh;
  width: 100vw;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-rows: 10vh 90vh;
}

.pageFoot {
  height: 10vh;
  width: 100vw;
}

.pageFootItem {
  height: 10vh!important;
}

.pageContent,
.pageContentItem {
  height: 90vh!important;
  width: 100vw;
}

.pageFootItem.slick-current {
  box-shadow: inset 0 -5px aqua;
  color: aqua;
}

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
</head>

<body>
  <div class="pageFoot">
    <div class='pageFootItem'>Intro</div>
    <div class='pageFootItem'>T01</div>
    <div class='pageFootItem'>T02</div>
    <div class='pageFootItem'>T03</div>
    <div class='pageFootItem'>T04</div>
    <div class='pageFootItem'>T05</div>
    <div class='pageFootItem'>T06</div>
    <div class='pageFootItem'>T07</div>
    <div class='pageFootItem'>T08</div>
    <div class='pageFootItem'>T09</div>
    <div class='pageFootItem'>T10</div>
    <div class='pageFootItem'>T11</div>
    <div class='pageFootItem'>T12</div>
    <div class='pageFootItem'>T13</div>
    <div class='pageFootItem'>T14</div>
    <div class='pageFootItem'>T15</div>
    <div class='pageFootItem'>T16</div>
    <div class='pageFootItem'>T17</div>
    <div class='pageFootItem'>T18</div>
    <div class='pageFootItem'>T19</div>
    <div class='pageFootItem'>T20</div>
  </div>
  <div class="pageContent">
    <div class="pageContentItem">Content1</div>
    <div class="pageContentItem">Content2</div>
    <div class="pageContentItem">Content3</div>
    <div class="pageContentItem">Content4</div>
    <div class="pageContentItem">Content5</div>
    <div class="pageContentItem">Content6</div>
    <div class="pageContentItem">Content7</div>
    <div class="pageContentItem">Content8</div>
    <div class="pageContentItem">Content9</div>
    <div class="pageContentItem">Content10</div>
    <div class="pageContentItem">Content11</div>
    <div class="pageContentItem">Content12</div>
    <div class="pageContentItem">Content13</div>
    <div class="pageContentItem">Content14</div>
    <div class="pageContentItem">Content15</div>
    <div class="pageContentItem">Content16</div>
    <div class="pageContentItem">Content17</div>
    <div class="pageContentItem">Content18</div>
    <div class="pageContentItem">Content19</div>
    <div class="pageContentItem">Content20</div>
  </div>
</body>

由于 slick.js 库不能免费用于商业用途，有没有其他方法可以实现这一点？

【问题讨论】：

你可以试试 Swiper，它是免费的。 idangero.us/swiper/demos
@arieljuod Swiper 也是一个用于轮播的库，难道没有任何库可以制作像 android 标签视图这样的可滑动标签吗？
我的工作伙伴为此使用了它。抱歉，我无法为您提供更多详细信息。我想你可以让轮播指示器成为标签，每张幻灯片都是每个标签的内容。
@arieljuod 这正是我在问题的代码 sn-p 中对 slick.js 所做的。问题是顶部的选项卡容器不可滚动。我想要的只是一种让它滚动的方法。即使我将overflow-x:scroll 添加到pageFoot，也会出现滚动条轨道，但它没有任何可拖动的拇指，因此无法滚动。

标签： javascript jquery css tabs slick.js

【解决方案1】：

您可以通过 overflowX: scroll 使用 css 来实现。

【讨论】：

【解决方案2】：

您可以只使用 html 和 css 来获得您想要的结果：

* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

.slider {
  width: 300px;
  background: #f1565a;
  overflow: hidden;
}

.slider ul {
  white-space: nowrap;
  overflow-x: scroll; 
}

.slider ul::-webkit-scrollbar {
  height: 2px;
}
 
.slider ul::-webkit-scrollbar-track {
  background: rgba(255,255,255, 0.5);
}
 
.slider ul::-webkit-scrollbar-thumb {
  background: rgba(255,255,255, 0.8);
}

.slider ul li {
  display: inline-block;
  font-family: sans-serif;
  padding: 10px;
  color: #fff;
}

<div class="slider">
  <ul>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
    <li>item</li>
  </ul>
</div>

现在，如果你需要，你可以实现 js 来制作箭头。 :)

【讨论】：