//pagination.component.scss .pagination{ position: absolute; left: 0; bottom: 0; width: 100%; .pages{ text-align: center; >div{ display: inline-block; cursor: pointer; } .page-arrow{ width: 40px; .arrow-left{ text-align: right; } .arrow-right{ text-align: left; } } .page-no{ display: inline-block; vertical-align: top; cursor: pointer; &.next{ margin-left: 20px; } &.prev{ margin-right: 20px; } margin:0 4px; width:40px; height:40px; line-height: 40px; border-radius: 100%; background: #bed5ec; font-size: 16px; color:#333; &.selected{ background: #3a89da; color:#FFF; } } } }
//pagination.component.html <div class="pagination" > <div class="pages"> <div class="page-arrow arrow-left" [hidden]="!hasPreview" (click)="pagePreview()"> <span class="page-no"><</span> </div> <div style="margin:0 11px 0 18px"> <span class="page-no" *ngFor="let page of showPages" [ngClass]="{selected: page==pageInfo.pageNow}" (click)="changePage(page)">{{page}}</span> </div> <div class="page-arrow arrow-right" [hidden]="!hasNext" (click)="pageNext()"> <span class="page-no" >></span> </div> </div> </div>
//pagination.component.ts import { Component,Output,Input,EventEmitter } from '@angular/core'; @Component({ selector: 'pagination',templateUrl: './pagination.component.html',styleUrls: ['./pagination.component.scss'] }) export class PaginationComponent { @Input() pageInfo= { pageNow: 1,pageCount: 1,pageSize: 10 }; curPage = this.pageInfo.pageNow; @Output() pageChange: EventEmitter<any> = new EventEmitter<any>(); hasNext = true; hasPreview = true; showPages = []; ngOnChanges() { this.hasNext = true; this.hasPreview = true; const pageInfo = this.pageInfo; let from = 1; const fill = Math.floor(pageInfo.pageSize / 2); if (pageInfo.pageCount >= pageInfo.pageSize) { from = Math.max(1,pageInfo.pageNow - fill); if (pageInfo.pageNow + fill > pageInfo.pageCount) { from = pageInfo.pageCount - pageInfo.pageSize + 1; } this.showPages = this.getShowPages(from,pageInfo.pageSize); } else { this.showPages = this.getShowPages(from,pageInfo.pageCount); } this.hasNext = pageInfo.pageNow < pageInfo.pageCount; this.hasPreview = pageInfo.pageNow > 1; } animationDone(done){ console.log('done',done); } getShowPages(from,count) { const arr: any = []; for (let i = 0; i < count; i++) { arr.push(from++); } return arr; } changePage(pageNow?) { if (this.curPage == pageNow || this.pageInfo.pageCount == 1)return; this.curPage = pageNow; this.pageInfo.pageNow = pageNow; this.pageChange.emit({pageNow}); } pagePreview() { if (!this.hasPreview) return; this.pageInfo.pageNow--; if (this.pageInfo.pageNow <= 1) { this.pageInfo.pageNow = 1; } this.changePage(this.pageInfo.pageNow); } pageNext() { if (!this.hasNext) return; this.pageInfo.pageNow++; if (this.pageInfo.pageNow > this.pageInfo.pageCount) { this.pageInfo.pageNow = this.pageInfo.pageCount; } this.changePage(this.pageInfo.pageNow); } }
可以拿来即用2017.9.11