我要造輪子系列- 經常使用的分頁組件

前言

分頁組件也前端高頻組件，但通常用在pc端，移動端出現比較少,由於按照移動端使用習慣在移動端一般會使用下拉加載刷新或者上拉加載刷新 此次編寫的組件也是針對pc端。分頁組件目的爲了方便瀏覽一般將服務器響應回來的大量數據作分頁 從實現方式上來講分頁基本分爲兩種方式：

1.查詢全部數據返回給客戶，經過顯示指定區間實現分頁，這種方法通常是指JS分頁

2.經過客戶發送的請求，構造sql語句，查詢表中的一段數據。

分頁組件效果

分頁組件需求分析

1.總數據量，通常傳入後端返回的數據總數字段

2.每頁實際條數，傳入自定數值

3.每頁要顯示條數，傳入自定的數值，好比每頁條數的是10條，在10條之間顯示5條

4.總共多少頁的計算公式是 總數據量/每頁要顯示條數

5.點擊下一頁,上一頁改變current 點擊首頁跳轉第一頁,點擊尾頁跳轉到最尾一頁，判斷若是第一頁和最尾一頁設置禁止點擊首頁、下一頁、上一頁、尾頁按鈕

6.input框輸入限制1 - 總數量的輸入，設置數值跳轉到當前頁

7.currentCallBack點擊返回當前索引

8.傳入color能夠自定喜歡的顏色

9.每頁顯示的條數計算，用vue的watch來監聽current值的變化 ,而後經過當前的current計算出實際顯示那幾頁出來，計算方式以下

watch: {
            current(newVal) {
                let temp = [],
                    max,
                    min = newVal - Math.floor(this.pageNum / 2)
                if (min < 1) min = 1
                max = min + this.pageNum - 1
                if (max > this.pageTotalNum) max = this.pageTotalNum
                for (let i = min; i <= max; i++) {
                    temp.push(i)
                }
                this.pageSizeNum = temp
            }
        },
複製代碼

props參數

參數	說明	類型	默認值
page-total	總數據	Number	100
page-num	要顯示頁數	Number	10
page-size	分頁大小	Number	5
color	傳入的主題顏色	Number	#409eff
currentCallBack	返回點擊的當前索引值	Events

完整代碼

<template>
    <div class="_page_container"> <ul class="_pages _pages_1"> <li :class="['_home', setFristDisabled]" @click.prevent="setHomePageination">首頁</li> <li :class="['_prev_ _prev' ,setFristDisabled]" @click="prevPageination">上一頁</li> <li :class="['_pages_li_1',getCurrent(item)?'_active_1':'']" :style="{backgroundColor : getCurrent(item) ? color : ''}" :data-index="item" v-for="(item) in pageSizeNum" :key="item" @click.prevent="switchPageination(item)" >{{item}} </li> <li :class="['_next_ _next', setLastDisabled]" @click.prevent="nextPageination">下一頁 </li> <li :class="['_last', setLastDisabled]" @click="setLastPageination">尾頁 </li> </ul> <div class="_jumper"> <span class="_count">共 {{pageTotalNum}} 頁</span> <span>前往</span> <label> <input class="_jumper_input" type="number" min="1" :max="pageTotalNum" @blur="jumpPageination($event)" @keyup.enter="jumpPageination($event)"/> </label> <span>頁</span> </div> </div>
</template>

<script> export default { name: 'pagination', props: { // 總數據 pageTotal: { type: Number, default: 100 }, // 實際分頁大小 pageSize: { type: Number, default: 10 }, //顯示頁數 pageNum: { type: Number, default: 5 }, //自定義顏色 color: { type: String, default: '#409eff' } }, data() { return { current: 1, pageSizeNum: Array.from({length: this.pageNum}, (_, index) => index + 1), pageTotalNum: Math.ceil(this.pageTotal / this.pageSize) } }, computed: { getCurrent() { return (index) => { return this.current === index } }, setFristDisabled() { return this.current === 1 ? '_disabled_c _disabled' : '' }, setLastDisabled() { return this.current === this.pageTotalNum ? '_disabled_c _disabled' : '' } }, watch: { current(newVal) { let temp = [], max, min = newVal - Math.floor(this.pageNum / 2) if (min < 1) min = 1 max = min + this.pageNum - 1 if (max > this.pageTotalNum) max = this.pageTotalNum for (let i = min; i <= max; i++) { temp.push(i) } this.pageSizeNum = temp } }, updated() { this.$emit('currentCallBack', this.current - 1) }, methods: { switchPageination(index) { this.current = index }, nextPageination() { if (this.current === this.pageTotalNum) { this.current = this.pageTotalNum }else { this.current++ } }, prevPageination() { if (this.current === 1) { this.current = 1 }else { this.current-- } }, setHomePageination() { this.current = 1 }, setLastPageination() { this.current = this.pageTotalNum }, jumpPageination(ev) { let value = Number(ev.currentTarget.value) if (value < 1) value = 1 if (value > this.pageTotalNum) value = this.pageTotalNum this.current = value } } } </script>

<style scoped> ._page_container { height: 28px; line-height: 28px; text-align: center; user-select: none; } ._page_container input[type=number] { -moz-appearance: textfield; } ._page_container input[type=number]::-webkit-inner-spin-button, ._page_container input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; } ._page_container ._pages { display: inline-block; } ._page_container ._pages li { display: inline-block; list-style: none; vertical-align: top; color: #303133; font-weight: bold; min-width: 30px; text-align: center; margin: 0 5px; border-radius: 2px; cursor: pointer; } ._page_container ._pages li:hover { opacity: .6; transition-duration: 500ms; transition-timing-function: ease; } ._page_container ._pages li:first-child, ._page_container ._pages li:last-child { font-size: 14px; } ._page_container ._pages ._prev, ._page_container ._pages ._next, ._page_container ._pages ._home, ._page_container ._pages ._last { font-size: 12px; font-weight: normal; padding: 0 8px; } ._page_container ._jumper { display: inline-block; color: #606266; margin-left: 10px; } ._page_container ._jumper ._count { margin-right: 10px; } ._page_container ._jumper ._jumper_input { display: inline-block; font-size: 14px; color: #606266; width: 50px; height: 26px; text-align: center; margin: 0 5px; padding: 3px; border: 1px solid #dcdfe6; border-radius: 4px; background: none; outline: none; box-sizing: border-box; } ._page_container ._jumper ._jumper_input:focus { border-color: #409eff; transition-duration: 500ms; transition-timing-function: ease; } ._pages_1 li { background-color: #f4f4f5; } ._active_1 { color: #fff !important; transition-duration: 500ms; transition-timing-function: ease; } ._active_2 { color: #409eff !important; } ._disabled { cursor: not-allowed !important; } ._disabled_c { color: #c0c4cc !important; } </style>

複製代碼

最後

我要造輪子系列的分頁組件也完成了，但願同窗們有空餘時間也多寫寫，你們一塊兒學習、一塊兒進步，共勉!!

npm

npm install nigo-vue-pagination
複製代碼

yarn

yarn add nigo-vue-pagination
複製代碼

github

git clone https://github.com/shinewen189/nigo-vue-pagination.git
複製代碼

我要造輪子系列文章

【1】.我要造輪子系列-一個輪子的誕生過程

【2】.我要造輪子系列-經常使用的拖拽組件