Как создать Android, как пролистывание вкладок в HTML? - PullRequest
Новая
       23

Как создать Android, как пролистывание вкладок в HTML?

2 голосов
/ 03 апреля 2019

Как создать следующие вкладки, используя javascript / jquery?

enter image description here

Я пытался сделать это с помощью 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 не является бесплатной для коммерческого использования, есть ли другой способ добиться этого?

Ответы [ 2 ]

0 голосов
/ 03 апреля 2019

Вы можете использовать только 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 для создания стрелок.:)

0 голосов
/ 03 апреля 2019

Вы можете добиться этого, используя css с overflowX: scroll.

...