因為沒有什麼思路，那就只能在前輩的專案中尋找思路了。
這不，直接開啟起點的頁面，按下那個傳說中的f12鍵，開始我傳奇生涯！...不好意思，串台了
好了，然後在找一本有緣書，跟我一同前往那神秘的未知世界。
就決定是你了，開始免費試讀。
然後我們就可以發現起點是如何實現這個功能的了，原來是使用columns這個屬性來讓文章自動分頁的昂。
我們現在就去搜尋一下columns是何方神聖吧。
developer.mozilla.org/zh-cn/docs/… - mdn
通過mdn的例項我們知道了原來columns是乙個簡寫屬性，代表了column-width和column-count兩個屬性，這兩個屬性又分別代表著：
理想的列寬，定義為 或 auto 關鍵字。實際寬度可以更寬或更窄以適合可用空間。see column-width。然後我們再看回起點中對這個屬性的定義元素內容應分成的理想列數，定義為 或 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
**真可愛，我要看**，**不給看，我就寫**，寫**不好寫，我就看**............
// style.css
* height: 100vh;
overflow: hidden;
margin: 0 16px;
}article
let i = 0;
let article = document.queryselector('article');
setinterval(() => px)`
}, 1000);
最後的最後，來波小星星吧。
element ui實現前端分頁
element ui裡的分頁元件 size change handlesizechange current change handlecurrentchange current page page page sizes 20,50,100 background page size limit lay...
VUE ElementUI實現前端分頁
參考了這位大佬的部落格 經過自己的修改，與elementui分頁外掛程式相結合，實現了前端元件分頁 效果圖如下 每頁幾條，前往幾頁，均可使用。下面直接上 一 定義變數 data rightslist 分頁資料,這裡用來儲存每頁切割後的資料 看起來格式是這樣的 陣列內套陣列，每個陣列就是一頁資料 to...
elementUI實現前端分頁
按照他的文件來寫分頁，最主要的是el table裡面展示的資料怎麼處理 最主要就是上面標紅這一塊的處理 allcommoditylist是後台取得資料，currentpage是當前頁，初始值0，pagesize當前需要展示的資料，初始值10 slice 方法從已有陣列中返回選定的資料 最主要就是上面...