ES6公用分页组件的封装及应用举例

版权声明：本文为博主原创文章，转载请注明出处。 https://blog.csdn.net/Fabulous1111/article/details/82777962

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/9
    getPaginationHtml () {
        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 = this
        this.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()

效果：