Question

我正在尝试实施＆＃34;滑动图像＆＃34;在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>的行为仍然存在。

即使我尝试使用slideNext的{{1}}和slidePrev方法，但它们无效。

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

Answer 1

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

在离子菜单中实施离子载玻片不起作用

2 个答案: