Ionic - 分页被新的 ion-slides 组件隐藏（Swiper）

Question

我正在使用使用 Swiper 的 ion-slides 组件 (Ionic v1.2.4)，当幻灯片过多（> 10）时，我遇到了分页被隐藏的问题用过的。

我修改了此 JSFiddle 以演示我遇到的问题，请注意，如果您从 HTML 中删除幻灯片，分页会相应显示。

任何人都可以告诉我如何强制分页显示吗？

更新

这是 Ionic 出于@nico 指出的任何原因而实施的。他们可能应该让这个可配置，让开发人员决定是否应该在 10 张幻灯片后隐藏分页。

我下面的解决方案是目前的一种解决方法，如果有人希望显示分页的话。

Answer 1

我找到了一个解决方案，我会与大家分享，以防你遇到这个问题。

我所做的是创建我自己的自定义分页，因为这样 ng-hide class 不会被添加，幸运的是 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 class，这是 Ionic 的默认 class 分页样式。

然后像这样在控制器的 Swipers 选项中创建绑定，以便在这个新的 div 容器下自动添加分页内容

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

最后添加一些 CSS 来设计新的 div 容器。我从 Ionic 的 css 文件中复制了用于水平项目符号分页的确切内容。

.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 repo

Answer 2

它是硬编码的。参见第 79 行 https://github.com/driftyco/ionic/blob/master/js/angular/directive/slides.js#L79

也许我们可以传递一个选项 hide-pagination=""，它接受布尔值或整数以在 n- 幻灯片后隐藏，默认情况下不会在 10 张幻灯片后隐藏分页。

这可以通过 Pull-Request 处理相关问题来完成。

我会深入研究它，因为我也需要该功能。

Answer 3

我在使用 Ionic 2 (RC.0) 时遇到了同样的问题：幻灯片上没有显示项目符号（无论我有多少张幻灯片）- "pager" 属性对我不起作用.

我发现分页总是隐藏的。

所以我的 solution/workaround 是覆盖我的 scss 文件中隐藏的 class 设置。此外，使用下面的项目符号设置，您可以获得漂亮的阴影。

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>

Answer 4

寻呼机默认隐藏，启用：

<ion-slides pager="true">

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

寻呼机布尔值是否显示寻呼机。默认值：false。

Ionic - 分页被新的 ion-slides 组件隐藏（Swiper）

Ionic - Pagination is being hidden with new ion-slides component (Swiper)

css

angularjs

ionic-framework

swiper