JavaScript前端實現小說分頁功能範例

2022-07-19 22:00:35

先讓我找找我的思路在哪裡

在小說讀書APP中，都會有分頁的功能，那麼前端如何實現這個功能呢？

因為沒有什麼思路，那就只能在前輩的專案中尋找思路了。

這不，直接開啟起點的頁面，按下那個傳說中的F12鍵，開始我傳奇生涯！...不好意思，串臺了

好了，然後在找一本有緣書，跟我一同前往那神祕的未知世界。

就決定是你了，開始免費試讀。

然後我們就可以發現起點是如何實現這個功能的了，原來是使用columns這個屬性來讓文章自動分頁的昂。

我們現在就去搜尋一下columns是何方神聖吧。

developer.mozilla.org/zh-CN/docs/… - MDN

通過MDN的範例我們知道了原來columns是一個簡寫屬性，代表了 column-width 和 column-count兩個屬性，這兩個屬性又分別代表著：

<'column-width'>

理想的列寬，定義為或 auto 關鍵字。實際寬度可以更寬或更窄以適合可用空間。See column-width。

<'column-count'>

元素內容應分成的理想列數，定義為或 auto 關鍵字。如果此值和列的寬度都不是 auto ，則它僅指示允許的最大列數。請參閱 column-count 。 - MDN

然後我們再看回起點中對這個屬性的定義columns: calc(100vw - 32px) 1;

其中calc(100vw - 32px)這個代表column-width的值代表了每一列的寬度為整屏的寬度再減去兩邊的間隙各16px。

這裡一提column-gap就是列與列的間隙，所以在圖中可以看到這裡的值設定了16px

而代表column-count這個值的1就是隻保持一列，並沒有什麼作用，因為100vw - 32px這個寬度已經不可能讓螢幕中再多一列了，多出的列數將會排列在右側。

當使用 columns 規定兩個值時，如:

columns: 100px 3;

表示：

當每列寬度大於 100px 時，就以 3 列分割顯示；當瀏覽器寬度縮小，導致在 3 列情況下無法滿足每列大於 100px，就開始轉為 2 列；當瀏覽器再縮小，2 列中每列無法再保持 100px 每列時，再次轉為 1 列...

以此類推，"100px" 為每列不可低於的寬值，"3" 表示指定要顯示的列。相對於單獨設定 column-width 或 column-count，columns 要更加靈活。 - 菜鳥教學 - Kai

還有一點需要注意的是，需要將文章的高度設定為螢幕的高度，這樣才會排成多列。

再通過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" rel="external nofollow" >
  <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/lionet1224/…

以上就是JavaScript前端實現小說分頁功能範例的詳細內容，更多關於JavaScript前端小說分頁的資料請關注it145.com其它相關文章！

JavaScript前端實現小說分頁功能範例

目錄

先讓我找找我的思路在哪裡

思路已至，碼來！

結束

熱門文章