JavaScript前端實現小說分頁功能示例
先讓我找找我的思路在哪裡
在小說讀書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前端小說分頁的資料請關註WalkonNet其它相關文章!