分頁(Pagination)概念-2
Published in
3 min readAug 16, 2020
接續上一篇的分頁筆記，
總共有三個部分
Step1. 編排資料來源
Step2. 依據資料來源的編排，來做頁碼的配置
Step3. 點擊各分頁的頁碼會跳出相對應的內容 與 點擊上一頁和下一頁的功能
這邊接續紀錄Step3的設計邏輯
Step3. 點擊各分頁的頁碼會跳出相對應的內容 與 點擊上一頁和下一頁的功能
Part1. 分頁頁碼
首先，在Step1有完成將資料庫進行分配，並依序存入page_str中，所以，可以將page_str的元素依序分配給相對應的分頁，如下圖所示
依照以上的內容操作後，應該就會有當點擊某一個分頁頁碼，就會跳出相對應的page_str的內容。
這邊要特別註釋一下，當你點擊某個分頁，應該要將那個分頁的元件的class加上active，並展示出不一樣的顏色，表示使用者目前是停留在哪個分頁上，像是下圖第一頁的頁碼的color屬性就被設為紅色。
Part2. 上一頁(prev)和下一頁(next)的按鈕功能
當按下下一頁的按鈕時，先將頁碼中哪一個頁碼目前的class含有active這個名稱，接著再判定該頁碼是否已經是最後一頁了，如果是，就不再進行頁面的跳轉，如果不是，就將頁面內容跳轉到下一頁的內容。
而上一頁的按鈕的功能跟下一頁的功能按鈕的內容差不多，當按下上一頁按鈕，先去爬出哪個頁碼的class含有active這個名稱，並判斷該頁碼是不是第一頁，如果是，就不跳轉頁面，如果不是，就將頁面的內容跳轉到上一頁的頁面內容。
如下面的流程圖
以下，是頁碼(pagination)練習的codepen連結
