前言

• 分頁組件是非常常用的一個功能,所以需要封裝成一個公共組件,方便調(diào)用

效果演示

ionic2實戰(zhàn)-自定義分頁組件.gif

核心代碼

• paging.html完整代碼

<ion-grid text-center *ngIf="total>pageSize">
  <ion-row>
    <ion-col no-padding>
      <button ion-button  small [color]="color" [disabled]="pageNum==1" (click)="btnClick(1)">首頁</button>
      <button ion-button  small [color]="color" [disabled]="pageNum==1" (click)="btnClick(pageNum-1)">上一頁
      </button>
      <button ion-button  small [color]="color" [disabled]="pageNum==ceil(total/pageSize)"
              (click)="btnClick(pageNum+1)">下一頁
      </button>
      <button ion-button  small [color]="color" [disabled]="pageNum==ceil(total/pageSize)"
              (click)="btnClick(ceil(total/pageSize))">尾頁
      </button>
    </ion-col>
  </ion-row>
  <ion-row>
    <ion-col no-padding style="font-size: 12px">
      每頁顯示{{pageSize}}條數(shù)據(jù)，共{{total}}條用踩，當(dāng)前為第{{pageNum}}頁推姻，共{{ceil(total/pageSize)}}頁
    </ion-col>
  </ion-row>
</ion-grid>

• paging.ts完整代碼

import {Component, Input, Output, EventEmitter} from '@angular/core';
import { IonicPage} from 'ionic-angular';
import {PAGE_SIZE} from "../../providers/Constants";

/**
 * @name 自定義分頁組件
 * @description
 * @example <page-paging [total]="18" (pageNumChange)="doSearch($event)"></page-paging>
 * @example <page-paging [total]="total" (pageNumChange)="doSearch($event)" pageSize="10" color="dark"></page-paging>
 */
@IonicPage()
@Component({
  selector: 'page-paging',
  templateUrl: 'paging.html',
})
export class PagingPage {

  @Input()
  total:number;//共多少條數(shù)據(jù)

  @Input()
  pageSize:number=PAGE_SIZE;//每頁大小,默認5條

  @Input()
  color:string='primary';//主題顏色

  @Input() pageNum:number=1;//當(dāng)前第幾頁,默認1
  @Output() pageNumChange = new EventEmitter<any>();


  constructor() {
  }

  btnClick(pageNum){
    this.pageNum = pageNum;
    this.pageNumChange.emit(pageNum);
  }

  ceil(num){
    return Math.ceil(num);
  }

}

• paging.module.ts完整代碼

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { PagingPage } from './paging';

@NgModule({
  declarations: [
    PagingPage,
  ],
  imports: [
    IonicPageModule.forChild(PagingPage),
  ],
  exports: [
    PagingPage
  ]
})
export class PagingPageModule {}

使用

• 在需要用的模塊中導(dǎo)入PagingPageModule
  

• 在.html上

<page-paging [total]="18" (pageNumChange)="doSearch($event)"></page-paging>

• 在.ts上

 doSearch(pageNumber){
    console.log(pageNumber);
  }

最后

• 覺得樣式丑的請自行修改pagination.html
• 此文也展示了Angular自定義組件最常用的@Input()和 @Output()的用法,希望大家能舉一反三寫出更強大的組件
• 更完整代碼在github