Question

我刚刚使用拆分窗格模板初始化了一个新的Ionic 4项目。

因此，我有一个带有侧面菜单的应用程序，应该可以轻扫它。但是它不起作用。在文档中，它正在工作： https://beta.ionicframework.com/docs/api/split-pane

代码如下：

<ion-app>
  <ion-split-pane when="md">
    <ion-menu>
      <ion-header>
        <ion-toolbar>
          <ion-title>Menu</ion-title>
        </ion-toolbar>
      </ion-header>
      <ion-content>
        <ion-list>
          <ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
            <ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
              <ion-icon slot="start" [name]="p.icon"></ion-icon>
              <ion-label>
                {{p.title}}
              </ion-label>
            </ion-item>
          </ion-menu-toggle>
        </ion-list>
      </ion-content>
    </ion-menu>
    <ion-router-outlet main></ion-router-outlet>
  </ion-split-pane>
</ion-app>

有人知道我想念什么吗？

Answer 1

通过检查，在具有相同屏幕分辨率的Chrome浏览器和其他浏览器之间，关联的样式类有所不同：

：启用菜单类型覆盖菜单的水合拆分窗格侧菜单侧开始菜单窗格可见
其他浏览器：启用菜单类型叠加菜单的菜单侧开始水合显示菜单

所以我的解决方法是在左/右显示二维拆分窗格，这是根据分辨率添加条件类：

<ion-menu [side]="sideMenu"
        [ngClass]="{'split-pane-side': sideMenu == 'start', 'menu-pane-visible': sideMenu == 'start', 'show-menu': sideMenu == 'end'}">

在我的app.component.ts中：

@HostListener('window:resize', ['$event'])
    onResize(event: Event): void {
        this.sideMenu = this.platform.width() > 767 ? 'start' : 'end';
        this.changeDetectorRef.detectChanges();
        this.changeDetectorRef.markForCheck();
    }

希望对您有帮助！

Ionic 4拆分窗格-无法在侧面菜单上滑动

1 个答案: