perf(virtual-scroll): reduce DOM writes

packages/demos/angular/package-lock.json

@@ -505,9 +505,9 @@
       }
     },
     "@ionic/core": {
-      "version": "0.0.2-55",
-      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-55.tgz",
-      "integrity": "sha512-nrBa0Kf5Hd/L6sG7YeKt8H0jM+gdvItNaXEyrZ+Y8AlPkRrFzQ03mltLsimbOaWbrvPSJwOMlWbMa+Vb5hSZhQ=="
+      "version": "0.0.2-59",
+      "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-59.tgz",
+      "integrity": "sha512-leAbEFIEYlfwMN1BIAbEIDtpQHlnJ/BXX4HfqAIjVkbEnUx2NO888+sCxXw+Ux8GeUwqdAEBXRPosCXMvuApJw=="
     },
     "@ngtools/json-schema": {
       "version": "1.1.0",

packages/demos/angular/src/app/virtual-scroll/virtual-scroll-page.component.ts

@@ -12,18 +12,81 @@ import { ToastController } from '@ionic/angular';
           <ion-title>Test</ion-title>
         </ion-toolbar>
       </ion-header>
-      <ion-content padding>
-        <ion-virtual-scroll [items]="items">
-          <ion-item *virtualItem="let item">{{item}}</ion-item>
-        </ion-virtual-scroll>
-      </ion-content>
+
+      <ion-content>
+
+      <ion-virtual-scroll [items]="items" approxItemHeight="320px">
+
+    <ion-card *virtualItem="let item; let itemBounds = bounds;">
+
+      <div>
+        <img [src]="item.imgSrc" [height]="item.imgHeight" [alt]="item.name">
+      </div>
+
+      <ion-card-header>
+        <ion-card-title>{{ item.name }}</ion-card-title>
+      </ion-card-header>
+      <ion-card-content>{{ item.content }}</ion-card-content>
+
+    </ion-card>
+
+  </ion-virtual-scroll>
+
+    </ion-content>
     </ion-page>
+
   </ion-app>`
 })
 export class VirtualScrollPageComponent {
-  items: string[];
+  items: any[] = [];
+
   constructor() {
-    this.items = Array.from({length: 1000}, (_, i) => i + '');
+    for (let i = 0; i < 1000; i++) {
+      this.items.push({
+        name: i + ' - ' + images[rotateImg],
+        imgSrc: getImgSrc(),
+        avatarSrc: getImgSrc(),
+        imgHeight: Math.floor((Math.random() * 50) + 150),
+        content: lorem.substring(0, (Math.random() * (lorem.length - 100)) + 100)
+      });
+
+      rotateImg++;
+      if (rotateImg === images.length) {
+        rotateImg = 0;
+      }
+    }
   }
 
 }
+
+
+const lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed' +
+'do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim' +
+' veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo ' +
+'consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse ' +
+'cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non' +
+' proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
+
+const images = [
+  'bandit',
+  'batmobile',
+  'blues-brothers',
+  'bueller',
+  'delorean',
+  'eleanor',
+  'general-lee',
+  'ghostbusters',
+  'knight-rider',
+  'mirth-mobile',
+];
+
+function getImgSrc() {
+  const src = `https://dummyimage.com/600x400/${Math.round(Math.random() * 99999)}/fff.png`;
+  rotateImg++;
+  if (rotateImg === images.length) {
+    rotateImg = 0;
+  }
+  return src;
+}
+
+let rotateImg = 0;