JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例

更新時(shí)間：2022年07月19日 16:54:57 作者：我系小西幾呀

這篇文章主要為大家介紹了JavaScript前端實(shí)現(xiàn)小說(shuō)分頁(yè)功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

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

在小說(shuō)讀書(shū)APP中，都會(huì)有分頁(yè)的功能，那么前端如何實(shí)現(xiàn)這個(gè)功能呢？

因?yàn)闆](méi)有什么思路，那就只能在前輩的項(xiàng)目中尋找思路了。

這不，直接打開(kāi)起點(diǎn)的頁(yè)面，按下那個(gè)傳說(shuō)中的F12鍵，開(kāi)始我傳奇生涯！...不好意思，串臺(tái)了

好了，然后在找一本有緣書(shū)，跟我一同前往那神秘的未知世界。

就決定是你了，開(kāi)始免費(fèi)試讀。

然后我們就可以發(fā)現(xiàn)起點(diǎn)是如何實(shí)現(xiàn)這個(gè)功能的了，原來(lái)是使用columns這個(gè)屬性來(lái)讓文章自動(dòng)分頁(yè)的昂。

我們現(xiàn)在就去搜索一下columns是何方神圣吧。

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

通過(guò)MDN的實(shí)例我們知道了原來(lái)columns是一個(gè)簡(jiǎn)寫屬性，代表了 column-width 和 column-count兩個(gè)屬性，這兩個(gè)屬性又分別代表著：

<'column-width'>

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

<'column-count'>

元素內(nèi)容應(yīng)分成的理想列數(shù)，定義為或 auto 關(guān)鍵字。如果此值和列的寬度都不是 auto ，則它僅指示允許的最大列數(shù)。請(qǐng)參閱 column-count 。 - MDN

然后我們?cè)倏椿仄瘘c(diǎn)中對(duì)這個(gè)屬性的定義columns: calc(100vw - 32px) 1;

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

這里一提column-gap就是列與列的間隙，所以在圖中可以看到這里的值設(shè)置了16px

而代表column-count這個(gè)值的1就是只保持一列，并沒(méi)有什么作用，因?yàn)?code>100vw - 32px這個(gè)寬度已經(jīng)不可能讓屏幕中再多一列了，多出的列數(shù)將會(huì)排列在右側(cè)。

當(dāng)使用 columns 規(guī)定兩個(gè)值時(shí)，如:

columns: 100px 3;

表示：

當(dāng)每列寬度大于 100px 時(shí)，就以 3 列分割顯示；當(dāng)瀏覽器寬度縮小，導(dǎo)致在 3 列情況下無(wú)法滿足每列大于 100px，就開(kāi)始轉(zhuǎn)為 2 列；當(dāng)瀏覽器再縮小，2 列中每列無(wú)法再保持 100px 每列時(shí)，再次轉(zhuǎn)為 1 列...

以此類推，"100px" 為每列不可低于的寬值，"3" 表示指定要顯示的列。相對(duì)于單獨(dú)設(shè)置 column-width 或 column-count，columns 要更加靈活。 - 菜鳥(niǎo)教程 - Kai

還有一點(diǎn)需要注意的是，需要將文章的高度設(shè)置為屏幕的高度，這樣才會(huì)排成多列。

再通過(guò)translate進(jìn)行平移，以及父級(jí)的overflow: hidden隱藏多余列，就可以達(dá)到分頁(yè)的效果了。

最后看看columns的兼容性:

可以看出都支持了這個(gè)屬性，可以放心大膽的用。

思路已至，碼來(lái)！

我們來(lái)簡(jiǎn)單的實(shí)現(xiàn)一下這個(gè)效果。

// 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>第一章: 我不是小說(shuō)</h3>
      <p>小說(shuō)真可愛(ài)，我要看小說(shuō)，小說(shuō)不給看，我就寫小說(shuō)，寫小說(shuō)不好寫，我就看小說(shuō)............</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);

最后實(shí)現(xiàn)的效果就是: