ios - 在 ion-slides 离子组件上显示寻呼机点

Question

我正在尝试在 ionic 2 应用程序的页面内创建一个滑块组件。我已经让它按预期工作，但寻呼机点没有出现。关于如何使用寻呼机的文档不是很好。有什么想法我在这里出错了吗？

    <div class="slider-container">
            <ion-slides pager="true">
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/scoping.png' />
                        <p class="slide-title">TITLE 1</p>
                        <p class="slide-text">Body text 1</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/projectmgmt.png' />
                        <p class="slide-title">TITLE 2</p>
                        <p class="slide-text">Body text 2</p>
                    </div>
                </ion-slide>
                <ion-slide>
                    <div class="slide">
                        <img src='assets/image/satisfaction.png' />
                        <p class="slide-title">TITLE 3</p>
                        <p class="slide-text">Body text 3</p>
                    </div>
                </ion-slide>
            </ion-slides>
    </div>

我也尝试过<ion-slides options="{pagination: true}">，<ion-slides pager="true">但这些都没有奏效。

编辑：在浏览器中检查后，我看到寻呼机正在使用这样的 div 容器呈现： <div class="swiper-pager hide"> 所以我绝对没有使用正确的参数来取消隐藏寻呼机。或者有一个错误。我正在使用 Ionic v2.0.0。

Answer 1

在 Ionic 3 中为我工作：

<ion-content>

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

</ion-content>

Answer 2

最后让它作为幻灯片的开始标签使用：

<ion-slides [options]="{pagination: true}">

Answer 3

您可以尝试调整寻呼机点的位置。也许它出现在您的图像后面。包含在您的 .scss 文件中：

.swiper-container-horizontal > .swiper-pagination
{
    bottom          : 50%; //Change accordingly
    z-index         : 99 !important;
}

我已经测试了你的代码（减去图像），它出现在我的身上。

Answer 4

如果你使用swiper来滑动页面，有很多参数可以做同样的事情——

<div class="swiper-pagination"></div>

这是分页的代码-

    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationClickable: true,
        spaceBetween: 30,
    });

完整的代码可以看这里。
我们有滑块的演示 - http://idangero.us/swiper/demos/#.WUJGrROGNp8
希望这对您也有帮助！