是否可以在离子边栏中使用幻灯片 [英] Is it possible to use slides in ionic sidebar

问题描述

我正在使用ionic开发移动应用程序，我想通过放置幻灯片来制作类似松弛的侧边菜单.

I'm building a mobile app in ionic and I wanna make a slack-like side menu by placing slides.

例如，当您单击主菜单项时，它会像松弛一样在侧菜单中滑出另一张幻灯片.

For example, when you click on main menu item, it will slide out another slide in the sidemenu as slack does.

我尝试在离子菜单中使用离子幻灯片，但幻灯片无法正常工作.

I tried to use ion-slides in ion-menu but slides is not working.

请查看屏幕截图.

这是代码段.

<ion-menu [content]="mycontent" [swipeEnabled]="false">
    <ion-content>

      <ion-slides>
        <ion-slide>
          <h1>Slide 1</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 2</h1>
        </ion-slide>
        <ion-slide>
          <h1>Slide 3</h1>
        </ion-slide>
      </ion-slides>

  </ion-content>

</ion-menu>

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

这就是我要构建的.

关于如何实现这一点的任何想法?

Any thoughts on how to implement this?

谢谢.

推荐答案

ion-slides组件利用引擎盖下的Swiper库. Swiper的部分初始化代码取决于了解幻灯片容器的宽度，并且该代码使用clientWidth进行获取.由于菜单以display:none开头，因此检索到的宽度始终为零，并且初始化代码对您不利.

The ion-slides component makes use of the Swiper library under the hood. Part of the init code for Swiper depends on knowing the width of the slide container, and the code uses clientWidth to get it. Since the menu starts out with display:none, the retrieved width is always zero and the init code bails on you.

您可以通过在Swiper初始化时临时设置display:block来解决此问题.我的侧面菜单位于组件内部，因此您可能需要根据情况调整以下代码:

You can get around this by temporarily setting display:block while Swiper initializes. I have my side menu inside of a component, so you may need to adjust this code to your situation:

app.html:

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

sidebar.html:

sidebar.html:

<ion-menu [content]="content" swipeEnabled="false">
  <ion-content>
    <ion-slides pager>
      <ion-slide>
        <h2>Slide 1</h2>
      </ion-slide>
      <ion-slide>
        <h2>Slide 2</h2>
      </ion-slide>
      <ion-slide>
        <h2>Slide 3</h2>
      </ion-slide>
    </ion-slides>
  </ion-content>
</ion-menu>

sidebar.component.ts:

sidebar.component.ts:

...
@Component({
  selector: 'sidebar',
  templateUrl: 'sidebar.html',
})
export class SidebarComponent implements AfterViewInit {
  @Input('content') content: NavController;

  @ViewChild(Slides) slides: Slides;
  @ViewChild(Menu, { read: ElementRef }) menuRef: ElementRef;

  // Use Renderer2 instead of direct DOM manipulation through the
  // ElementRef.nativeElement.
  //
  // @see: https://medium.com/@kmathy/angular-manipulate-properly-the-dom-with-renderer-16a756508cba
  //
  constructor(private renderer: Renderer2) {
  }

  // ViewChild template references might not be available until
  // AfterViewInit lifecycle hook runs.
  //
  // @see: https://blog.angular-university.io/angular-viewchild/
  //
  ngAfterViewInit() {
    this.renderer.setStyle(this.menuRef.nativeElement, 'display', 'block');
    setTimeout(() => {
      // Swiper init has its own ngAfterViewInit code that delays 300ms
      // before running. Don't remove the 'display' style until after that.
      this.renderer.removeStyle(this.menuRef.nativeElement, 'display');
    }, 310);
  }

}

这篇关于是否可以在离子边栏中使用幻灯片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！