Ionic: 在iOS模拟器上得到空白的侧边菜单?

问题描述 投票:0回答:1

我在iOS模拟器上得到一个空白的侧边菜单屏幕,虽然选项是可以点击的。这个问题在浏览器或安卓手机上运行应用程序时不会发生。我使用的是最新的ionic和Xcode。请让我知道如何解决这个问题。先谢谢你。我已经添加了type="overlay "和ION-split-pane,但没有任何效果。

enter image description here

**app.component.html**

<ion-app>
  <ion-menu side="start" menuId="lamb-menu" contentId="lamb-side-menu">
    <app-side-menu></app-side-menu>
  </ion-menu>
  <ion-router-outlet id="lamb-side-menu"></ion-router-outlet>
</ion-app>
**side-menu.component.html**

<ion-content>
  <div class="navbar">
    <a class="nav-open"><span class="icon nav-icon"></span></a>
    <div class="side-nav">
      <div class="nav-top">
        <a class="logo">
          <img src="../../assets/images/logo.png" alt="logo" />
        </a>
        <h1>MTC Ltd. Chennai</h1>
      </div>
      <div class="nav-list">
        <div class="nav-item" (click)="navigatePage('nearby-stops')"><a [ngClass]="this.selectedRoute === '/home/nearby-stops' ? this.className : ''"><span class="icon nav-home-icon"></span>{{"SIDE_MENU.HOME" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('planner')"><a [ngClass]="this.selectedRoute === '/home/planner' ? this.className : ''"><span class="icon nav-trip-icon"></span>{{"SIDE_MENU.TRIP_PLANNER" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('stops')"><a [ngClass]="this.selectedRoute == '/home/stops' ? this.className : ''"><span class="icon nav-stops-icon"></span>{{"SIDE_MENU.STOP" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('favorites')"><a [ngClass]="this.selectedRoute == '/home/favorites/favoriteTrips' || this.selectedRoute == '/home/favorites/favoriteRoutes' ? this.className : ''"><span class="icon nav-favourite-icon"></span>{{"SIDE_MENU.FAVORITE" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('planner/places')"><a [ngClass]="this.selectedRoute == '/home/planner/places'  ? this.className : ''"><span class="icon nav-places-icon"></span>{{"SIDE_MENU.SAVED_PLACE" | translate}}</a></div>
        <div class="nav-item visible-mobile" (click) = "navigatePage('settings')" ><a [ngClass]="this.selectedRoute == '/home/settings' ? this.className : ''"><span class="icon nav-sos-icon"></span>{{"SIDE_MENU.SETTINGS" | translate}}</a></div>
        <!-- <div class="nav-item visible-mobile" ><a [ngClass]="this.selectedRoute == '/home/settings' ? this.className : ''"><span class="icon nav-sos-icon"></span>{{"SIDE_MENU.SETTINGS" | translate}}</a></div> -->
        <div class="nav-item" (click)="navigatePage('changeCity')"><a [ngClass]="this.selectedRoute === '/home/changeCity' ? this.className : ''"><span class="icon nav-city-icon"></span>{{"SIDE_MENU.CHANGE_CITY" | translate}}</a></div>
        <div class="nav-item" (click)="navigatePage('changeLanguage')"><a [ngClass]="this.selectedRoute === '/home/changeLanguage' ? this.className : ''"><span class="icon nav-language-icon"></span>{{"SIDE_MENU.CHANGE_LANGUAGE" | translate}}</a></div>
        <div class="nav-item visible-mobile" (click)="feedback()"><a><span class="icon nav-feedback-icon"></span>{{"SIDE_MENU.FEEDBACK" | translate}}</a></div>
        <!-- <div class="nav-item"><a [ngClass]="this.selectedRoute == '/home/termsAndConditions' ? this.className : ''"><span class="icon nav-terms-icon"></span>{{"SIDE_MENU.TERMS_AND_CONDITIONS" | translate}}</a></div> -->
      </div>
    </div>
  </div>
</ion-content>
**Ionic Info**

Ionic:

   Ionic CLI                     : 6.1.0 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.801.3
   @angular-devkit/schematics    : 8.1.3
   @angular/cli                  : 8.1.3
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 9.0.0 ([email protected])
   Cordova Platforms : android 8.1.0, browser 5.0.4, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.2.0, cordova-plugin-ionic-webview 4.1.3, (and 13 other plugins)

Utility:

   cordova-res (update available: 0.14.0) : 0.11.0
   native-run                             : 1.0.0

System:

   ios-sim : 8.0.2
   NodeJS  : v12.16.2 (/usr/local/bin/node)
   npm     : 6.14.4
   OS      : macOS Catalina
   Xcode   : Xcode 11.4.1 Build version 11E503a
ios cordova ionic-framework ionic4 side-menu
1个回答
0
投票

解决了,是HTML模板的问题。我必须重写HTML和CSS部分,使其在iOS上运行。

© www.soinside.com 2019 - 2024. All rights reserved.