日常開發 分頁元件的思路梳理

1. 分頁元件的幾種場景分析

首先這裡做幾個假設

假設最多顯示9個分頁符

省略部分用…來進行表示

該場景沒啥好說的 所有的分頁符均顯示就行了

[外鏈轉存失敗,源站可能有防盜煉機制,建議將儲存下來直接上傳(img-0w8lmksj-1595141809098)(./image/image-20200718221106689.png)]

此場景有兩種情況 左邊省略和右邊省略：

這裡要注意將…看做乙個模組，則仍然是9個分頁符，分析如下

如果啟用頁碼在起始或者結束的 9 - 2 個頁碼範圍內 即是單邊省略情況

這裡的 9 代表最大模組數量，2代表 乙個是另外一邊的邊界 + 省略號模組

此場景剛好是啟用頁處於非上述兩種場景的情況，即 總頁數 > 最大頁數 且 啟用頁數不在首尾邊界 7 範圍內的場景

這裡注意：仍然加上兩個省略符仍然是9個tab的場景， 具體分析

中間存在的元素是9-4（兩個省略號 + 首尾邊界）

1. getpageconfig

因此上述的場景其實十分簡單，我們最多只需要渲染9個不同的分頁符即可，其實我們最關鍵的就是獲得乙個需要渲染的分頁符列表 (最多9個元素)，我們將元素分為…或者序號即可, 所以分頁元件最關鍵的就是，找到需要渲染的列表是啥，我們寫乙個getpageconfig方法即可

const

page_block=9
const
page_indent=4
function
getpageconfig
(current, totalpage)).
map(
(_, i)
=> i +1)
}else
if(current +
page_indent
>= totalpage )).
map(
(_, i)
=> i + totalpage -
page_block+3
))}else
if(current -
page_indent
<=1)
).map(
(_, i)
=> i +1)
.concat([
'...'
, totalpage])}
else).
map(
(_, i)
=> i + current -2)
,...
['...'
, totalpage]]}
return pageconfig
}

後面我們只需要通過模板渲染即可

notes: 這裡的頁面渲染其實直接通過innerhtml全部重新整理 效能有點差的 建議簡單的對比需要變化的dom之後再改 這樣可能性能會好一點

function

render
(current, totalpage)
">
$ `
}) container.innerhtml = renderhtml.
join(''
)}

function

init
(callbacks)
= target
if(classlist.
contains
('pagination-item'))
})render(28
,30) init.
current_page=28
init.
total_page=30
;}

github歡迎點讚

日常開發之資料分頁之前端展示的三種思路

兩種實現方式 前端 後端 三種思路 返回前端的資料來源 streamlinelist 後端 limit分頁公式 curpage是當前第幾頁 pagesize是一頁多少條記錄 select from student limit curpage 1 pagesize,pagesize 栗子 select...

CSS framework日常開發的經驗總結

二 css框架的開發順序 1 格式化 reset.css 格式化css的真正好處是能夠快速啟動工作，你可以在新的html檔案裡引入框架，不用再處理重置padding 和 margins，實現統一的排版 瀏覽器下的相同表現。2 布局 layout.css 定義頁面是二欄還是三欄，是全屏還是1024 7...

安卓日常開發碰到的問題

radiogroup與textview對不齊 android layout height match parent scrollview套listview問題 貼 static class utility int totalheight 0 for int i 0 i listadapter.get...