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

【问题标题】：Show pager dots on ion-slides ionic component在 ion-slides 离子组件上显示寻呼机点
【发布时间】：2017-03-31 07:36:29
【问题描述】：

我正在尝试在 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。

【问题讨论】：

试试<ion-slides pager>这对我有用
对我不起作用。
@Huiting 在 ionic 3 上为我工作 :)

标签： ios ionic2 ion-slides

【解决方案1】：

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

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

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

【讨论】：

这对我不起作用。经过检查，我可以看到“隐藏”类在渲染时被添加到寻呼机组件中。

【解决方案2】：

终于把它作为幻灯片的开始标签使用了：

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

【讨论】：

似乎在 ionic 3 上不再起作用了。我不得不使用：

【解决方案3】：

如果你是用swiper来滑动页面，有很多参数都要做同样的事情-

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

这是分页的代码-

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

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

【讨论】：

【解决方案4】：

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

【讨论】：