Question

如何使用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库不是免费用于商业用途，还有其他方法可以实现这一目的吗？

Answer 1

您可以将CSS与overflowX: scroll一起使用。

Answer 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制作箭头。：）

如何在html中创建Android像滑动选项卡？

2 个答案: