版权声明:本文为博主原创文章,转载请注明出处。 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()
效果: