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 '';
    },
  },
}

或者您可以使用Dynamic Bullets，它最多可以显示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">

限制离子载玻片的分页数

1 个答案: