Question

我试图在离子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>

这是paginatin的代码 -

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

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

在离子滑动离子组分上显示寻呼机点

4 个答案: