Ограничить количество пагинаций в ионных слайдах - PullRequest
Новая
       25

Ограничить количество пагинаций в ионных слайдах

0 голосов
/ 30 октября 2018

Как мне сделать так, чтобы пейджер отображал максимум 10 пуль в Ionic? В настоящее время имеется более 50 слайдов, и на пейджере отображается более 50 точек (маркеров), что крайне нежелательно. Есть ли какой-нибудь механизм, с помощью которого я могу установить максимальное количество пуль нумерации? Я установил pager = true и хотел бы отображать только 10 страниц. Было бы полезно, если есть какие-либо переменные SAAS, которые могут быть переопределены для отображения только 10 нумерации страниц. Разбиение на страницы необходимо и не может быть проигнорировано установкой pager = false из-за требований клиента.

1 Ответ

0 голосов
/ 30 октября 2018

Вы можете настроить маркеры с помощью параметров-> 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">
...