javascript - 在 ionic 菜单中实现 ionic 幻灯片不起作用

Question

我正在尝试在 Ionic-3 的侧面菜单中实现“滑动图像”。

以下是我的代码:

<ion-menu [content]="content">
  <ion-content>
        <ion-slides>
            <ion-slide>
                <img class="slide-image" src="img1.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img2.png">
            </ion-slide>
            <ion-slide>
                <img class="slide-image" src="img3.png">
            </ion-slide>
        </ion-slides>

        <ion-list>
          <p>some menu items</p>
        </ion-list>
  </ion-content>
</ion-menu>

<ion-nav [root]="rootPage" #content></ion-nav>

元素渲染正确，但问题是 <ion-slide>其行为类似于侧面菜单中的水平 ScrollView 。

我尝试禁用侧面菜单的滑动手势，但仍然是 <ion-slide> 的行为坚持下去。

即使我尝试过使用slideNext和slidePrev方法Slides但他们没有工作。

有什么方法可以使用 Ionic-3 或第三方库在侧面菜单中实现滑动图像吗？

Answer 1

验证菜单中的 ionic 幻灯片，这些幻灯片在侧面菜单中的行为是正常的。看看this关联。这些幻灯片只是具有不同颜色背景的幻灯片。

实现部分是:

 @App({
  template: `
    <ion-menu [content]="content">

      <ion-toolbar>
        <ion-title>Pages</ion-title>
      </ion-toolbar>

      <ion-content>
        <ion-slides pager>

          <ion-slide style="background-color: green">
            <h2>Slide 1</h2>
          </ion-slide>

          <ion-slide style="background-color: blue">
            <h2>Slide 2</h2>
          </ion-slide>

          <ion-slide style="background-color: red">
            <h2>Slide 3</h2>
          </ion-slide>

        </ion-slides>
      </ion-content>

    </ion-menu>

    <ion-nav id="nav" [root]="rootPage" #content swipeBackEnabled="false"></ion-nav>

  `
})