离子 - 菜单中离子滑动的实施不起作用

Question

我正在尝试在离子-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>的行为仍然存在。

即使我尝试使用slideNext和slidePrev Slides的方法，但它们不起作用。

有什么办法可以使用离子3或第三方库中的侧面 - 菜单实现滑动图像？

Answer 1

验证菜单中的离子滑动，在sidemenu中的行为是正常的。看看此链接。这些幻灯片只是具有不同颜色背景的幻灯片。

实现在：

的一部分

 @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正确读取大小。

请参阅我的答案，以获取有关如何处理此问题的代码：是否可以在离子侧栏中使用幻灯片