2

我正在使用带有角度/材料的 Ionic 4/Angular7 来构建我的应用程序。但是，我在真实设备（三星 C5）上面临性能缓慢的问题。

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

  1. 离子按钮

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

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

4

0 回答 0