Можно ли использовать слайды в ионной боковой панели - PullRequest
Новая
       56

Можно ли использовать слайды в ионной боковой панели

0 голосов
/ 28 января 2019

Я создаю мобильное приложение в ионном режиме и хочу создать боковое меню, похожее на слабину, размещая слайды.

Например, когда вы нажимаете на элемент главного меню, оно выдвигает другой слайд вбоковое меню как слабое.

Я пытался использовать ионные слайды в ионном меню, но слайды не работают.

Посмотрите скриншот, пожалуйста.

enter image description here

Вот фрагмент кода. 

<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>

Вот что я пытаюсь построить.

enter image description here

Есть мысли о том, как это реализовать?

Спасибо.

1 Ответ

0 голосов
/ 29 июня 2019

Компонент ионных слайдов использует библиотеку Swiper под колпаком.Часть кода инициализации для Swiper зависит от знания ширины контейнера слайдов, и код использует clientWidth для его получения.Так как меню начинается с display:none, полученная ширина всегда равна нулю, и код инициализации сбрасывается на вас.

Вы можете обойти это, временно установив display:block во время инициализации Swiper.У меня есть боковое меню внутри компонента, поэтому вам может потребоваться настроить этот код в соответствии с вашей ситуацией:

app.html: 

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

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: 

...
@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);
  }

}
...