ionic2/3实战-自定义分页组件

前言

• 分页组件是非常常用的一个功能,所以需要封装成一个公共组件,方便调用

效果演示

ionic2实战-自定义分页组件.gif

核心代码

• paging.html完整代码

  
    
      首页
      上一页
      
      下一页
      
      尾页
      
    
  
  
    
      每页显示{{pageSize}}条数据，共{{total}}条，当前为第{{pageNum}}页，共{{ceil(total/pageSize)}}页
    
  

• paging.ts完整代码

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

/**
 * @name 自定义分页组件
 * @description
 * @example 
 * @example 
 */
@IonicPage()
@Component({
  selector: 'page-paging',
  templateUrl: 'paging.html',
})
export class PagingPage {

  @Input()
  total:number;//共多少条数据

  @Input()
  pageSize:number=PAGE_SIZE;//每页大小,默认5条

  @Input()
  color:string='primary';//主题颜色

  @Input() pageNum:number=1;//当前第几页,默认1
  @Output() pageNumChange = new EventEmitter();


  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 {}

使用

• 在需要用的模块中导入PagingPageModule
  

  

• 在.html上

• 在.ts上

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

最后

• 觉得样式丑的请自行修改pagination.html
• 此文也展示了Angular自定义组件最常用的@Input()和 @Output()的用法,希望大家能举一反三写出更强大的组件
• 更完整代码在github