离子幻灯片在离子菜单不工作中的实现

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>的行为类似于侧边菜单中的水平滚动视图。

我尝试禁用侧边菜单的滑动手势，但<ion-slide>的行为仍然存在。

甚至我也尝试过使用Slides的slideNext和slidePrev方法，但它们都不起作用。

有没有办法使用Ionic-3或第三方库来实现侧边菜单中的滑动图像？

Answer 1

验证菜单中的离子幻灯片，这些幻灯片的行为在sidemenu中是正常的。请查看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>

  `
})

Answer 2

要完成这项工作，需要进行一些引导，以便正确初始化底层Swiper库。离子菜单以display:none开头，因此Swiper无法使用幻灯片容器上的clientWidth正确读取大小。

有关如何处理此问题的代码，请参阅我的答案：Is it possible to use slides in ionic sidebar