Внешний интерфейс реализует новую функцию пейджинга

JavaScript

Позвольте мне сначала найти, где мои идеи

В новом приложении для чтения будет функция пейджинга, так как же интерфейс реализует эту функцию?

Потому что идеи нет, она может найти идеи только в проектах предшественников.

Нет, просто откройте страницу стартовой точки, нажмите легендарную клавишу F12 и начните свою легендарную карьеру! ... извините, я на шоу

Ну, тогда я ищу книгу судьбы, и я пойду с собой в тот таинственный неизведанный мир.

Вы можете начать бесплатную пробную версию.

Затем мы можем узнать, как начальная точка реализует эту функцию.columnsЭто свойство включает автоматическую нумерацию страниц статей.

Давай искать сейчасcolumnsКак это свято.

developer.Mozilla.org/this-cn/docs/… - MDN

На примере MDN мы знаем, что оригиналcolumnsявляется сокращенным свойством, представляющимcolumn-widthа такжеcolumn-countДва свойства, которые, в свою очередь, представляют:

<'column-width'>

Идеальная ширина столбца, определяемая ключевым словом or auto. Фактическая ширина может быть больше или меньше, чтобы соответствовать доступному пространству. См. ширину столбца.

<'column-count'>

Идеальное количество столбцов, на которые должно быть разделено содержимое элемента, определяется как ключевое слово or auto. Если ни это значение, ни ширина столбца не являются auto , это просто указывает на максимально допустимое количество столбцов. См. количество столбцов. - МДН

Затем мы вернемся к определению этого свойства в исходной точке.columns: calc(100vw - 32px) 1;

вcalc(100vw - 32px)этот представительcolumn-widthЭто значение означает, что ширина каждого столбца равна ширине всего экрана за вычетом зазоров с обеих сторон.16px.

упомянуть здесьcolumn-gapЭто зазор между столбцом и столбцом, поэтому на рисунке видно, что здесь установлено значение16px

и представлятьcolumn-countэтого значения1Это сохранить только один столбец, и это не имеет никакого эффекта, потому что100vw - 32pxПри такой ширине уже нельзя сделать еще одну колонку на экране, а лишние колонки будут располагаться с правой стороны.

При использовании столбцов для указания двух значений, например:

columns: 100px 3;

Выражать:

Когда ширина каждого столбца превышает 100 пикселей, он будет отображаться в 3 столбцах; когда ширина браузера уменьшается, в результате чего каждый столбец не может соответствовать требованию более 100 пикселей в случае 3 столбцов, он будет начинают преобразовываться в 2 столбца; когда браузер снова уменьшится, в 2 столбца Когда каждый столбец больше не может поддерживать 100 пикселей на столбец, снова переключитесь на 1 столбец...

И так далее, «100px» — это значение ширины, которое не может быть меньше, чем каждая колонка, «3» означает, что указывается отображаемая колонка. По сравнению с индивидуальной настройкой ширины столбца или количества столбцов столбцы являются более гибкими. -Учебник для новичков - Кай

Следует также отметить, что высота статьи должна соответствовать высоте экрана, чтобы она располагалась в нескольких столбцах.

пройти сноваtranslateперевести, а родительoverflow: hiddenСкройте лишние столбцы, чтобы добиться эффекта нумерации страниц.

последний взглядcolumnsСовместимость:

Видно, что это свойство поддерживается, и им можно уверенно пользоваться.

Идея пришла, код будет!

Давайте просто реализуем этот эффект.

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./style.css">
  <script src="./vue.js"></script>
</head>
<body>
  <div class="wrapper">
    <article>
      <h3>第一章: 我不是小说</h3>

      <p>小说真可爱，我要看小说，小说不给看，我就写小说，写小说不好写，我就看小说............</p> <!-- *1000 -->
    </article>
  </div>

  <script src="./app.js"></script>
</body>
</html>

// style.css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.wrapper{
  height: 100vh;
  overflow: hidden;
  margin: 0 16px;
}

article{
  columns: calc(100vw - 32px) 1;
  column-gap: 16px;
  height: 100%;
  transition: .4s;
}

let i = 0;
let article = document.querySelector('article');

setInterval(() => {
  let width = document.body.offsetWidth;
  i++;
  if(i > 3) i = 0;

  article.style.transform = `translateX(-${(width - 16) * i}px)`
}, 1000);

Конечный эффект:

все кончено

Наконец, давайте немного звезды.

GitHub.com/Лев ET1224/…

Категории