Question

我正在使用使用Swiper的ion-slides组件（Ionic v1.2.4），并且我在遇到太多（＆gt; 10）时隐藏了分页的问题正在使用幻灯片。

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

有人能告诉我如何强制显示分页吗？

更新

正如@nico指出的那样，这是Ionic已经实施的任何理由。它们应该可以使这个可配置，让开发人员知道在10张幻灯片之后是否应该隐藏分页。

我的解决方案现在是一种解决方法，但是如果有人想要显示分页。

Answer 1

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

我所做的是创建我自己的自定义分页，因为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容器的样式。我从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

默认情况下隐藏了寻呼机，以启用：

<ion-slides pager="true">

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

pager boolean 是否显示寻呼机。默认值：false。

Answer 3

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

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

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

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

Answer 4

我在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>

离子 - 新的离子滑动组件（Swiper）隐藏着分页

4 个答案: