IonPaginationModule是否已停用？Ionic 6.2中无法导入该模块

首先明确：Ionic 框架从未提供官方的 IonPaginationModule，因此找不到相关文档、导入失败是正常现象。以下是两种在Ionic 6.2中实现分页的常用方法：

一、用Ionic原生组件封装分页栏 #

利用Ionic自带的ion-button、ion-row、ion-text等组件，快速实现自定义分页控件，完全适配Ionic样式：

模板代码（HTML） #

<ion-footer>
  <ion-toolbar>
    <ion-row align-items-center justify-content-center>
      <ion-button 
        size="small" 
        (click)="goToPreviousPage()" 
        [disabled]="currentPage === 1"
      >
        上一页
      </ion-button>
      <ion-text class="mx-3">
        {{ currentPage }} / {{ totalPages }}
      </ion-text>
      <ion-button 
        size="small" 
        (click)="goToNextPage()" 
        [disabled]="currentPage === totalPages"
      >
        下一页
      </ion-button>
    </ion-row>
  </ion-toolbar>
</ion-footer>

<!-- 数据列表示例 -->
<ion-list>
  <ion-item *ngFor="let item of currentPageItems">
    {{ item.title }}
  </ion-item>
</ion-list>

组件逻辑（TypeScript） #

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-custom-pagination',
  templateUrl: './custom-pagination.page.html',
  styleUrls: ['./custom-pagination.page.scss'],
})
export class CustomPaginationPage implements OnInit {
  currentPage = 1;
  itemsPerPage = 10;
  allItems = Array(64).fill(0).map((_, idx) => ({ title: `数据项 ${idx + 1}` }));
  totalPages!: number;
  currentPageItems: Array<{ title: string }> = [];

  ngOnInit() {
    this.calculateTotalPages();
    this.updateCurrentPageItems();
  }

  calculateTotalPages() {
    this.totalPages = Math.ceil(this.allItems.length / this.itemsPerPage);
  }

  goToPreviousPage() {
    if (this.currentPage > 1) {
      this.currentPage--;
      this.updateCurrentPageItems();
    }
  }

  goToNextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++;
      this.updateCurrentPageItems();
    }
  }

  updateCurrentPageItems() {
    const startIdx = (this.currentPage - 1) * this.itemsPerPage;
    const endIdx = startIdx + this.itemsPerPage;
    this.currentPageItems = this.allItems.slice(startIdx, endIdx);
  }
}

二、使用第三方分页库（ngx-pagination） #

如果不想手动封装，可以使用成熟的Angular分页库ngx-pagination，只需简单配置即可快速实现分页：

1. 安装依赖 #

npm install ngx-pagination --save

2. 在模块中导入 #

import { NgxPaginationModule } from 'ngx-pagination';
import { NgModule } from '@angular/core';

@NgModule({
  imports: [
    // 其他Ionic/Angular模块
    NgxPaginationModule
  ]
})
export class YourPageModule { }

3. 页面中使用 #

<!-- 数据列表 -->
<ion-list>
  <ion-item *ngFor="let item of allItems | paginate: { itemsPerPage: 10, currentPage: currentPage }">
    {{ item.title }}
  </ion-item>
</ion-list>

<!-- 分页控件 -->
<ion-footer>
  <ion-toolbar>
    <div class="ion-text-center">
      <pagination-controls 
        (pageChange)="currentPage = $event"
        previousLabel="上一页"
        nextLabel="下一页"
      ></pagination-controls>
    </div>
  </ion-toolbar>
</ion-footer>

4. 组件逻辑 #

import { Component } from '@angular/core';

@Component({
  selector: 'app-ngx-pagination-demo',
  templateUrl: './ngx-pagination-demo.page.html',
  styleUrls: ['./ngx-pagination-demo.page.scss'],
})
export class NgxPaginationDemoPage {
  currentPage = 1;
  allItems = Array(64).fill(0).map((_, idx) => ({ title: `数据项 ${idx + 1}` }));
}

样式适配提示 #

如果ngx-pagination的默认样式和Ionic风格不符，可通过自定义CSS修改分页控件的字体、间距、按钮样式，使其与Ionic设计统一。

内容的提问来源于stack exchange，提问作者leoagostinho