Ionic - разбиение на страницы скрывается с помощью нового компонента ion-slides (Swiper)

По умолчанию пейджер скрыт, чтобы можно было:

<ion-slides pager="true">

https://ionicframework.com/docs/v2/api/components/slides/Slides/

pager boolean Показывать или не показывать пейджер. По умолчанию: false.

Я нашел решение, которым поделюсь со всеми, если вы застряли в этом.

Что я сделал, так это создал свою собственную разбивку на страницы, так как таким образом класс ng-hide не добавляется, к счастью, Swiper позволяет сделать это довольно легко.

Для этого добавьте элемент <div>, чтобы привязать разбивку на страницы так

<ion-slides options="swiper.options" slider="swiper.data.slider">
      <ion-slide-page ng-repeat="item in slides.Tasks" >                              
      </ion-slide-page>                           
</ion-slides>
<div class="custom-swiper-pagination swiper-pagination"></div>

Обратите внимание на класс swiper-pagination, который я также добавил, это класс Ionic по умолчанию для стилей разбивки на страницы.

Затем создайте привязку в параметрах Swipers в контроллере, как это, чтобы элементы разбивки на страницы автоматически добавлялись в этот новый контейнер div.

$scope.swiper = {
        options: {
            pagination: '.custom-swiper-pagination',
            paginationClickable: true,
            loop: false,
            direction: 'horizontal',
            spaceBetween: 20,
            speed: 600
        },
        data: {}
};

И, наконец, добавьте немного CSS для стилизации вашего нового div контейнера. Я скопировал точный материал из файла css Ionic для горизонтальной разбивки на страницы.

.custom-swiper-pagination {
  bottom: 0px;
  left: 0;
  width:100%;
}

.custom-swiper-pagination .swiper-pagination-bullet {
  margin: 0 5px; 
}

А вот обновленный JSFiddle в качестве живого примера.

Обновить

Как заметил @nico, это не столько ошибка, потому что используется флаг showPager вместе с ng-if, чтобы скрыть разбиение на страницы. Но это то, что люди хотели бы контролировать, поэтому, вероятно, это проблема, которую нужно настроить с помощью Ionic.

Мое решение по-прежнему работает как временное исправление, если вы не хотите вручную редактировать код библиотеки Ionic.

Некоторые из поднятых вопросов по этому поводу можно найти здесь Ionic's Репозиторий GitHub

Это жестко запрограммировано. См. Строку 79 https://github.com/driftyco/ionic/blob/master/js/angular/directive/slides.js#L79.

Возможно, мы могли бы передать параметр hide-pagination = "", который принимает логические или целые числа для скрытия после n-слайдов, а значения по умолчанию не скрывают разбиение на страницы после 10 слайдов.

Это можно сделать с помощью этого Pull-Request решения связанной проблемы. .

Я углублюсь в это, так как мне тоже нужна эта функция.

У меня была такая же проблема с Ionic 2 (RC.0): на слайдах маркеры не отображались (независимо от того, сколько слайдов у меня было) - атрибут «пейджер» у меня не работал.

Я понял, что нумерация страниц всегда скрыта.

Итак, мое решение / обходной путь - переопределить настройку скрытого класса в моем файле scss. Кроме того, с настройками маркера ниже вы получите красивую тень.

ion-slides {
    .hide {
        display: block !important; // override "display: none"
    }
    .swiper-pagination-bullet {
        background-color: #fff;
        box-shadow: 0px 0px 2px #000000;
    }
}

и мои слайды выглядят примерно так:

<ion-slides pager>
  <ion-slide>
    <h1>Slide 1</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 2</h1>
  </ion-slide>
  <ion-slide>
    <h1>Slide 3</h1>
  </ion-slide>
</ion-slides>