Question

我正在将Ionic 4 / Angular7与angular / material一起使用来构建我的应用程序。但是，我在实际设备（Samgsung C5）上遇到性能下降的问题。

“我的页面”设置是一个Home.page，其中包含一个headerCompontent，并使用按钮（modalCtrl）从headerCompontent中调用Filter.page。

离子按钮

我已经使用此组件来构建带有这样的图标的“过滤器”按钮

<ion-buttons slot="end" (tap)="show()">
    <ion-button fill="clear">
        <i class="fa fa-cog " aria-hidden="true"></i>
    </ion-button>
</ion-buttons>

单击按钮时，将显示涟漪效应，并且涟漪效应有点慢和滞后。我尝试使用(click)，但这是相同的。

2。离子模态

我有一个过滤器页面，我尝试使用modalCtrl对其进行调用，如下所示

let modal = await this.modalCtrl.create({
  component: FilterPage,
  cssClass: "filter animated zoomIn fastest",
  backdropDismiss: true,
  showBackdrop: true,
  animated: false
})
await modal.present();

模式滤波器不是全屏模式，而是盒模式，并使用Animation.css ZoomIn效果，在本地浏览器中非常平滑，但是当我在真实设备上尝试使用它时，ZoomIn效果在第一时间非常慢被调用时，就像使用2-3帧来完成整个动画一样。但是，它在第一次调用后更加流畅，但仍然与浏览器不同。

我已经使用--prod标志和Capacitor来构建apk。有什么建议可以改善吗？像是预加载FilterModal页面？

这是我的ionic info

ionic (Ionic CLI)             : 4.12.0 (/usr/local/lib/node_modules/ionic)
   Ionic Framework               : @ionic/angular 4.2.0
   @angular-devkit/build-angular : 0.13.8
   @angular-devkit/schematics    : 7.2.4
   @angular/cli                  : 7.3.8
   @ionic/angular-toolkit        : 1.4.1

Capacitor:

   capacitor (Capacitor CLI) : 1.0.0-beta.19
   @capacitor/core           : 1.0.0-beta.19

Cordova:

   cordova (Cordova CLI) : 7.1.0
   Cordova Platforms     : none
   Cordova Plugins       : no whitelisted plugins (5 plugins total)

System:

   Android SDK Tools : 26.1.1 (/Users/gary/Library/Android/sdk)
   ios-deploy        : 1.9.4
   NodeJS            : v8.11.4 (/usr/local/bin/node)
   npm               : 6.9.0
   OS                : macOS Mojave
   Xcode             : Xcode 10.1 Build version 10B61

更新

我尝试在iPhone上构建并运行，没有问题，动画快速流畅。但是，我尝试使用另一台Android手机来测试相同的东西，它在第一次通话时仍然会出现动画缓慢的情况，此后会变得更加流畅。

两个Android手机均在Android 8上并且使用Chrome WebView。

Ionic4 / Angular7（模组，离子按钮）的性能降低

0 个答案: