ES6公用分頁組件的封裝及應用舉例，以下源碼使用到JQuery、Sass，重要的是方法，不合適可以根據自己的需要改改。

分頁類

以下為pagination.js源碼

import './pagination.scss' import $ from '../../lib/jquery-3.3.1.min' class Pagination {constructor () {this.defaultOption = {container : null,pageNum : 1,pageRange : 2,onSelectPage : null}this._bindEvent()}_bindEvent () {const that = this// 事件委托$(document).on('click', '.pg-item', function(){let $this = $(this)// 對于active和disabled按鈕點擊，不做處理if($this.hasClass('active') || $this.hasClass('disabled')){return}typeof that.option.onSelectPage === 'function' ? that.option.onSelectPage($this.data('value')) : null})}// 渲染render (userOption) {// 合并選項this.option = $.extend({}, this.defaultOption, userOption)// 判斷容器是否為合法的jquery對象if(!(this.option.container instanceof $)){return}// 判斷是否只有1頁if(this.option.pages <= 1){return}// 渲染分頁內容// alert(this.getPaginationHtml())this.option.container.html(this.getPaginationHtml())}// 獲取分頁的html, |上一頁| 2 3 4 =5= 6 7 8|下一頁| 5/9getPaginationHtml () {let html = '', pageArray = [],option = this.option,start = option.pageNum - option.pageRange > 0 ? option.pageNum - option.pageRange : 1,end = option.pageNum + option.pageRange < option.pages ? option.pageNum + option.pageRange : option.pages// 上一頁按鈕數據pageArray.push({name : '上一頁',value : this.option.prePage,disabled : !this.option.hasPreviousPage,previousBtn : true})// 數字按鈕處理for(let i = start; i <= end; i++){pageArray.push({name : i,value : i,active : (i === option.pageNum)})}// 下一頁按鈕數據pageArray.push({name : '下一頁',value : this.option.nextPage,disabled : !this.option.hasNextPage,nextBtn : true})for(let i = 0, iLength = pageArray.length; i < iLength; i++) {if(pageArray[i].disabled) {html += `<span class="pg-item ${pageArray[i].previousBtn ? 'previous' : ''}${pageArray[i].nextBtn ? 'next' : ''} disabled" data-value="${pageArray[i].value}">${pageArray[i].name}</span>`} else {if (pageArray[i].active) {html += `<span class="pg-item active" data-value="${pageArray[i].value}">${pageArray[i].name}</span>`} else {html += `<span class="pg-item ${pageArray[i].previousBtn ? 'previous' : ''}${pageArray[i].nextBtn ? 'next' : ''} " data-value="${pageArray[i].value}">${pageArray[i].name}</span>`}}}html += `<span class="pg-total">共${option.pages}頁</span>`return html} } module.exports = Pagination

樣式

以下為pagination.scss源碼

.pagination {text-align: center;color: #333;.pg-item{display: inline-block;height: 0.3rem;width: 0.3rem;line-height: 0.3rem;margin: 0 0.05rem;box-sizing: border-box;background: #728ab6;user-select : none;color: #fff;&.disabled {background: none;cursor: auto;color: #ddd; }&.active {border: 1px solid #728ab6;background: none;cursor: auto;color: #728ab6;}&.previous, &.next {width: 0.8rem;}}.pg-total{margin-left: 10px;background: none;cursor: auto;} }

dom結構

應用舉例

以下為use.js源碼:

import $ from './lib/jquery-3.3.1.min' // 引用JQuery import service from './service/' // 導入接口 import Pagination from './util/pagination' // 導入分頁類 const use = {// 用于發送到后端請求數據，默認請求第一頁，四條數據pageInfo: {type : 'hot',page : 1, // 當前頁pageSize : 4 // 每頁顯示多少條},init () {this.loadWorks()},loadWorks () {const that = this// 請求數據service.getWorksList(this.pageInfo, function (res) {that.render(res)// 需要分頁的話，接口需要返回當前頁碼、總頁數/總條數（其他的可通過這兩個計算出來）const paginationParam = {hasPreviousPage : res.pageNum !== 1, // 是否有上一頁prePage : res.pageNum - 1, // 上一頁是哪頁hasNextPage : res.pageNum !== res.totalPages, // 是否有下一頁nextPage : res.pageNum + 1, // 下一頁是哪頁pageNum : res.pageNum, // 當前是第幾頁pages : res.totalPages // 一共多少頁}// 加載分頁信息that.loadPagination(paginationParam)}, function (err) {console.log(err)})},render () {// 渲染數據，此處略。},loadPagination (pageInfo) {const that = thisthis.pagination ? '' : (this.pagination = new Pagination());this.pagination.render($.extend({}, pageInfo, {container : $('.pagination'), // .pagination為分頁容器的選擇器onSelectPage : function(pageNum){that.data.worksParam.page = pageNum;that.loadWorks()}}));} } use.init()

效果：

總結

以上是生活随笔為你收集整理的ES6公用分页组件的封装及应用举例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。