Angular 简单的分页组件

//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">&lt;</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" >&gt;</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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!