限制离子幻灯片中的分页次数

Question

如何使寻呼机在 Ionic 中最多显示 10 个项目符号？ 目前有超过 50 张幻灯片，寻呼机显示超过 50 个点（项目符号），这是非常不受欢迎的。 是否有任何机制可以设置最大分页子弹数量？ 我已设置 pager=true 并且只想显示 10 个分页。 如果有任何 SAAS 变量可以被覆盖以仅显示 10 个分页，这将有所帮助。 分页是必需的，不能因客户要求设置 pager=false 而忽略。

Answer 1

可以通过options->renderBullet自定义子弹，例如： 对于离子 4：

在 .html 文件中：

<ion-slides pager="true" [options]="options">

在 .ts 文件中：

options = {
  pagination: {
    el: '.swiper-pagination',
    clickable: true,
    renderBullet: function (index, className) {
      if (index < 10) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
      }
      return '';
    },
  },
}

或者您可以使用动态子弹，它显示最多 5 个点和一些过渡动画：

options = {
      pagination: {
        el: '.swiper-pagination',
        dynamicBullets: true,
      },
    }

对于 Ionic3 试试这样：

import { ViewChild } from '@angular/core';
import { Slides } from 'ionic-angular';

class MyPage {
  @ViewChild(Slides) slides: Slides;

  ngAfterViewInit() {
    this.slides.renderBullet= function (index, className) {
      if (index < 10) {
        return '<span class="' + className + '">' + (index + 1) + '</span>';
      }
      return '';
    }
  }
}

或者对于动态项目符号：

this.slides.dynamicBullets = "true";

在 html 中：

<ion-slides #slides pager="true">