上个月在学习 Angular4 的入门练习的时候,在一个小项目中想到要实现的一个功能组件,翻页导航条是一个常用的功能,所以把它写成一个组件的方式就可以方便共用。以下是实践出来比较简单的翻页例子做为参考。
import {Component, Input, OnInit} from '@angular/core'; @Component({ selector: 'app-page-nav', templateUrl: './page-nav.component.html', styleUrls: ['./page-nav.component.css'] }) export class PageNavComponent implements OnInit { @Input() pageIndex: number = 1; @Input() dataTotal: number = 0; @Input() pageSize: number = 1; private pageNum: number; private pageCount: number; private startNum: number; private endNum: number; private pages: Array<Page>; constructor() { } ngOnInit() { this.pageSize = Math.max(this.pageSize, 1); this.pageIndex = Math.max(this.pageIndex, 1); this.pageCount = Math.ceil(this.dataTotal / this.pageSize); this.calcPage(); } /** * 来自网络的一种算法,然后自己进行加工处理成 angular 上能用的 */ private calcPage() { var startNum: number = 0; var endNum: number = 0; if (this.pageCount <= this.pageSize) { endNum = this.pageCount; } else { if ((this.pageIndex + this.pageSize) >= this.pageCount) { endNum = this.pageCount; } else { endNum + this.pageIndex + this.pageSize; if ((this.pageSize + this.pageIndex) <= (2 * this.pageSize + 1)) { if ((2 * this.pageSize + 1) >= this.pageCount) { endNum = this.pageCount; } else { endNum = 2 * this.pageSize + 1; } } else { endNum = this.pageSize + this.pageIndex; } } } if (this.pageIndex <= this.pageSize) { startNum = 1; } else { if ((this.pageIndex + this.pageSize) >= this.pageCount) { if ((2 * this.pageSize + 1) >= this.pageCount) { if ((this.pageCount - 2 * this.pageSize) >= 1) { startNum = this.pageCount - 2 * this.pageSize; } else { startNum = 1; } } else { startNum = this.pageCount - 2 * this.pageSize; } } else { if ((this.pageIndex - this.pageSize) >= 1) { startNum = this.pageIndex - this.pageSize; } else { startNum = 1; } } } this.loopOut(startNum, endNum); this.startNum = startNum; this.endNum = endNum; } private loopOut(startNum: number, endNum: number) { this.pages = []; for (var i = startNum; i <= endNum; i++) { if (i == this.pageIndex) { //输出@符号,代表当前页 this.pages.push(new Page(i, '', true)); } else { this.pages.push(new Page(i, '', false)); } } } } export class Page { constructor(public pageNumber: number, public pageUrl: string, public selected: boolean) { } }
在模板中的调用代码:
<app-page-nav [dataTotal]="25" [pageIndex]="1" [pageSize]="10"></app-page-nav>
转载请注明:隨習筆記 » Angular实战:翻页导航条