Ionic 2：列表中的项目响应点击缓慢答案

【问题标题】：Ionic 2: Items in list slow to respond to clickIonic 2：列表中的项目响应点击缓慢
【发布时间】：2016-11-23 18:24:00
【问题描述】：

我正在构建一个 Ionic 2 应用程序，该应用程序具有 <ion-list> 和 <ion-item>s 以及（单击）事件。在使用<ion-list> 加载页面时，<ion-item> 的点击事件会在几秒钟后变为活动且可点击。直到页面加载几秒钟后，点击项目才会生效。

我的列表中只有几个项目，并尝试使用 virtualScroll 列表但没有效果。

这可能是什么原因？

【问题讨论】：

原因可能有多种，能否提供代码sn -p ？
我找到了解决办法。请看下面我的回答。谢谢。

标签： ionic-framework ionic2

【解决方案1】：

我已经找到了解决这种反应迟钝的方法。不要使用离子项目，而是使用带有tappable 和ion-item 属性集的<div> 标签。

下面的代码显示了修复

<ion-list [virtualScroll]="news">
    <div tappable ion-item *virtualItem="let n" text-wrap (click)="openNews(n)">
      <ion-row>
        <ion-col width-20>
          <img *ngIf="n.thumbnail" [src]="n.thumbnail">
        </ion-col>
        <ion-col width-80 text-wrap>
          <h2>{{n.post_title}}</h2>
          <p [innerHTML]="n.post_excerpt"></p>
          </ion-col>
      </ion-row>
    </div>
  </ion-list>

【讨论】：

+1 用于发布解决方案，这个问题也可能会被举报github.com/driftyco/ionic/issues/5838
tappable 与 IonicModule.forRoot(MyApp, { pageTransition: 'md-transition' }) 一起成功了，
注意：你不必使用div，你仍然可以使用ion-item，只要添加tappable属性即可。
我使用了相同的代码，但得到了这个错误：未捕获的类型错误：无法在 VirtualScroll.readUpdate 设置属性“长度”为空。请告诉您如何初始化新闻数组。在这里查看我的问题：stackoverflow.com/questions/45750977/…