0

我正在尝试使用 Sidr ( berriart.com/sidr ) 滑动面板，一切正常，但在智能手机上，打开和关闭动画不流畅，移动不顺畅。有没有使动画流畅的解决方案？

<div class="app">

  <span id="menu-badge" class="dx-badge" style="display:none;"></span>

  <div id="sidr">
    <dx-list 
      #notificationsList 
      [dataSource]="menu.items" 
      [pullRefreshEnabled]="false" 
      (onItemClick)="menu.itemClick($event)">
      <div *dxTemplate="let item of 'item'" class="slideout-menu">
        <fa *ngIf="item.icon.indexOf('fa')==0" name="{{item.icon}}"></fa>
        <i *ngIf="item.icon.indexOf('glyphicon')==0" class="{{item.icon}}"></i>&nbsp;{{item.text}}
      </div>   
    </dx-list>
  </div>

  <dx-toolbar
    *ngIf="authorized && loaded"
    #appToolbar id="appToolbar" 
    [dataSource]="menu.toolbarItems" 
    (onInitialized)="onToolbarInitialized($event)">
    <div *dxTemplate="let data of 'title'">
      <div class="app-header">{{menu.appHeaderText}}</div>
    </div>
  </dx-toolbar>

  <router-outlet *ngIf="authorized && loaded"></router-outlet>
</div>

在 .ts 文件中：

$(document).ready(function() {
    $('#simple-menu').sidr();
});
4

1 回答 1

1

一个可能的问题是正在进行的更改检测周期过多。一台电脑可以解决这个问题，一部手机就不行了。尝试重写您的应用程序，以便它可以与ChangeDetectionStrategy.OnPush.

无论哪种方式，都值得在打开和关闭时使用 chrome devtools 运行分析器。通过一点点挖掘，您可以找出代码的哪一部分正在耗尽资源。它也可能是*ngFor需要的，trackBy因为它不断创建元素。

仅通过您提供的代码无法真正回答这个问题，需要您进行适当的调查。另一方面，将 jQuery 与 Angular 结合使用是不受欢迎的，但我们不要打开那罐蠕虫 :)

于 2018-09-01T20:11:56.823 回答