perf(virtual-scroll): reduce DOM writes

This commit is contained in:
Manu Mtz.-Almeida
2018-02-09 17:22:37 +01:00
parent a47d087135
commit 9226684826
7 changed files with 332 additions and 138 deletions

View File

@ -207,18 +207,18 @@
} }
}, },
"@angular/router": { "@angular/router": {
"version": "5.2.3", "version": "5.2.4",
"resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.3.tgz", "resolved": "https://registry.npmjs.org/@angular/router/-/router-5.2.4.tgz",
"integrity": "sha512-XVEpwNZta76FYas1gZSSGvkQoiGgQjvXfab6CwOh958d4c0C+9pJsykqsv6X/n8TSTShQt7wjs/vp/copXeuoA==", "integrity": "sha512-sg3iCThhbfv/6zARdKbHNLc7Xe1Rt1deit55b3K+WlrHX7GhsuJPLcitrNaADIcgDKbNT9XrwBaNirAEip9hxA==",
"dev": true, "dev": true,
"requires": { "requires": {
"tslib": "1.9.0" "tslib": "1.9.0"
} }
}, },
"@ionic/core": { "@ionic/core": {
"version": "0.0.2-55", "version": "0.0.2-59",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-55.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-59.tgz",
"integrity": "sha512-nrBa0Kf5Hd/L6sG7YeKt8H0jM+gdvItNaXEyrZ+Y8AlPkRrFzQ03mltLsimbOaWbrvPSJwOMlWbMa+Vb5hSZhQ==", "integrity": "sha512-leAbEFIEYlfwMN1BIAbEIDtpQHlnJ/BXX4HfqAIjVkbEnUx2NO888+sCxXw+Ux8GeUwqdAEBXRPosCXMvuApJw==",
"dev": true "dev": true
}, },
"@stencil/core": { "@stencil/core": {
@ -1411,12 +1411,14 @@
"dependencies": { "dependencies": {
"abbrev": { "abbrev": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true, "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.0.tgz",
"integrity": "sha1-0FVMIlZjbi9W58LlrRg/hZQo2B8=",
"optional": true "optional": true
}, },
"ajv": { "ajv": {
"version": "4.11.8", "version": "4.11.8",
"bundled": true, "resolved": "https://registry.npmjs.org/ajv/-/ajv-4.11.8.tgz",
"integrity": "sha1-gv+wKynmYq5TvcIK8VlHcGc5xTY=",
"optional": true, "optional": true,
"requires": { "requires": {
"co": "4.6.0", "co": "4.6.0",
@ -1425,16 +1427,19 @@
}, },
"ansi-regex": { "ansi-regex": {
"version": "2.1.1", "version": "2.1.1",
"bundled": true "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
"integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8="
}, },
"aproba": { "aproba": {
"version": "1.1.1", "version": "1.1.1",
"bundled": true, "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.1.1.tgz",
"integrity": "sha1-ldNgDwdxCqDpKYxyatXs8urLq6s=",
"optional": true "optional": true
}, },
"are-we-there-yet": { "are-we-there-yet": {
"version": "1.1.4", "version": "1.1.4",
"bundled": true, "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
"integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
"optional": true, "optional": true,
"requires": { "requires": {
"delegates": "1.0.0", "delegates": "1.0.0",
@ -1443,36 +1448,43 @@
}, },
"asn1": { "asn1": {
"version": "0.2.3", "version": "0.2.3",
"bundled": true, "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.3.tgz",
"integrity": "sha1-2sh4dxPJlmhJ/IGAd36+nB3fO4Y=",
"optional": true "optional": true
}, },
"assert-plus": { "assert-plus": {
"version": "0.2.0", "version": "0.2.0",
"bundled": true, "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-0.2.0.tgz",
"integrity": "sha1-104bh+ev/A24qttwIfP+SBAasjQ=",
"optional": true "optional": true
}, },
"asynckit": { "asynckit": {
"version": "0.4.0", "version": "0.4.0",
"bundled": true, "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
"optional": true "optional": true
}, },
"aws-sign2": { "aws-sign2": {
"version": "0.6.0", "version": "0.6.0",
"bundled": true, "resolved": "https://registry.npmjs.org/aws-sign2/-/aws-sign2-0.6.0.tgz",
"integrity": "sha1-FDQt0428yU0OW4fXY81jYSwOeU8=",
"optional": true "optional": true
}, },
"aws4": { "aws4": {
"version": "1.6.0", "version": "1.6.0",
"bundled": true, "resolved": "https://registry.npmjs.org/aws4/-/aws4-1.6.0.tgz",
"integrity": "sha1-g+9cqGCysy5KDe7e6MdxudtXRx4=",
"optional": true "optional": true
}, },
"balanced-match": { "balanced-match": {
"version": "0.4.2", "version": "0.4.2",
"bundled": true "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-0.4.2.tgz",
"integrity": "sha1-yz8+PHMtwPAe5wtAPzAuYddwmDg="
}, },
"bcrypt-pbkdf": { "bcrypt-pbkdf": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/bcrypt-pbkdf/-/bcrypt-pbkdf-1.0.1.tgz",
"integrity": "sha1-Y7xdy2EzG5K8Bf1SiVPDNGKgb40=",
"optional": true, "optional": true,
"requires": { "requires": {
"tweetnacl": "0.14.5" "tweetnacl": "0.14.5"
@ -1480,21 +1492,24 @@
}, },
"block-stream": { "block-stream": {
"version": "0.0.9", "version": "0.0.9",
"bundled": true, "resolved": "https://registry.npmjs.org/block-stream/-/block-stream-0.0.9.tgz",
"integrity": "sha1-E+v+d4oDIFz+A3UUgeu0szAMEmo=",
"requires": { "requires": {
"inherits": "2.0.3" "inherits": "2.0.3"
} }
}, },
"boom": { "boom": {
"version": "2.10.1", "version": "2.10.1",
"bundled": true, "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
"integrity": "sha1-OciRjO/1eZ+D+UkqhI9iWt0Mdm8=",
"requires": { "requires": {
"hoek": "2.16.3" "hoek": "2.16.3"
} }
}, },
"brace-expansion": { "brace-expansion": {
"version": "1.1.7", "version": "1.1.7",
"bundled": true, "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.7.tgz",
"integrity": "sha1-Pv/DxQ4ABTH7cg6v+A8K6O8jz1k=",
"requires": { "requires": {
"balanced-match": "0.4.2", "balanced-match": "0.4.2",
"concat-map": "0.0.1" "concat-map": "0.0.1"
@ -1502,51 +1517,61 @@
}, },
"buffer-shims": { "buffer-shims": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "resolved": "https://registry.npmjs.org/buffer-shims/-/buffer-shims-1.0.0.tgz",
"integrity": "sha1-mXjOMXOIxkmth5MCjDR37wRKi1E="
}, },
"caseless": { "caseless": {
"version": "0.12.0", "version": "0.12.0",
"bundled": true, "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.12.0.tgz",
"integrity": "sha1-G2gcIf+EAzyCZUMJBolCDRhxUdw=",
"optional": true "optional": true
}, },
"co": { "co": {
"version": "4.6.0", "version": "4.6.0",
"bundled": true, "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
"integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
"optional": true "optional": true
}, },
"code-point-at": { "code-point-at": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
"integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c="
}, },
"combined-stream": { "combined-stream": {
"version": "1.0.5", "version": "1.0.5",
"bundled": true, "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.5.tgz",
"integrity": "sha1-k4NwpXtKUd6ix3wV1cX9+JUWQAk=",
"requires": { "requires": {
"delayed-stream": "1.0.0" "delayed-stream": "1.0.0"
} }
}, },
"concat-map": { "concat-map": {
"version": "0.0.1", "version": "0.0.1",
"bundled": true "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
}, },
"console-control-strings": { "console-control-strings": {
"version": "1.1.0", "version": "1.1.0",
"bundled": true "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
"integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4="
}, },
"core-util-is": { "core-util-is": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "resolved": "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.2.tgz",
"integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac="
}, },
"cryptiles": { "cryptiles": {
"version": "2.0.5", "version": "2.0.5",
"bundled": true, "resolved": "https://registry.npmjs.org/cryptiles/-/cryptiles-2.0.5.tgz",
"integrity": "sha1-O9/s3GCBR8HGcgL6KR59ylnqo7g=",
"requires": { "requires": {
"boom": "2.10.1" "boom": "2.10.1"
} }
}, },
"dashdash": { "dashdash": {
"version": "1.14.1", "version": "1.14.1",
"bundled": true, "resolved": "https://registry.npmjs.org/dashdash/-/dashdash-1.14.1.tgz",
"integrity": "sha1-hTz6D3y+L+1d4gMmuN1YEDX24vA=",
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "1.0.0" "assert-plus": "1.0.0"
@ -1554,14 +1579,16 @@
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"optional": true "optional": true
} }
} }
}, },
"debug": { "debug": {
"version": "2.6.8", "version": "2.6.8",
"bundled": true, "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.8.tgz",
"integrity": "sha1-5zFTHKLt4n0YgiJCfaF4IdaP9Pw=",
"optional": true, "optional": true,
"requires": { "requires": {
"ms": "2.0.0" "ms": "2.0.0"
@ -1569,26 +1596,31 @@
}, },
"deep-extend": { "deep-extend": {
"version": "0.4.2", "version": "0.4.2",
"bundled": true, "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
"integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
"optional": true "optional": true
}, },
"delayed-stream": { "delayed-stream": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
}, },
"delegates": { "delegates": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
"integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
"optional": true "optional": true
}, },
"detect-libc": { "detect-libc": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.2.tgz",
"integrity": "sha1-ca1dIEvxempsqPRQxhRUBm70YeE=",
"optional": true "optional": true
}, },
"ecc-jsbn": { "ecc-jsbn": {
"version": "0.1.1", "version": "0.1.1",
"bundled": true, "resolved": "https://registry.npmjs.org/ecc-jsbn/-/ecc-jsbn-0.1.1.tgz",
"integrity": "sha1-D8c6ntXw1Tw4GTOYUj735UN3dQU=",
"optional": true, "optional": true,
"requires": { "requires": {
"jsbn": "0.1.1" "jsbn": "0.1.1"
@ -1596,21 +1628,25 @@
}, },
"extend": { "extend": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz",
"integrity": "sha1-p1Xqe8Gt/MWjHOfnYtuq3F5jZEQ=",
"optional": true "optional": true
}, },
"extsprintf": { "extsprintf": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "resolved": "https://registry.npmjs.org/extsprintf/-/extsprintf-1.0.2.tgz",
"integrity": "sha1-4QgOBljjALBilJkMxw4VAiNf1VA="
}, },
"forever-agent": { "forever-agent": {
"version": "0.6.1", "version": "0.6.1",
"bundled": true, "resolved": "https://registry.npmjs.org/forever-agent/-/forever-agent-0.6.1.tgz",
"integrity": "sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=",
"optional": true "optional": true
}, },
"form-data": { "form-data": {
"version": "2.1.4", "version": "2.1.4",
"bundled": true, "resolved": "https://registry.npmjs.org/form-data/-/form-data-2.1.4.tgz",
"integrity": "sha1-M8GDrPGTJ27KqYFDpp6Uv+4XUNE=",
"optional": true, "optional": true,
"requires": { "requires": {
"asynckit": "0.4.0", "asynckit": "0.4.0",
@ -1620,11 +1656,13 @@
}, },
"fs.realpath": { "fs.realpath": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
}, },
"fstream": { "fstream": {
"version": "1.0.11", "version": "1.0.11",
"bundled": true, "resolved": "https://registry.npmjs.org/fstream/-/fstream-1.0.11.tgz",
"integrity": "sha1-XB+x8RdHcRTwYyoOtLcbPLD9MXE=",
"requires": { "requires": {
"graceful-fs": "4.1.11", "graceful-fs": "4.1.11",
"inherits": "2.0.3", "inherits": "2.0.3",
@ -1634,7 +1672,8 @@
}, },
"fstream-ignore": { "fstream-ignore": {
"version": "1.0.5", "version": "1.0.5",
"bundled": true, "resolved": "https://registry.npmjs.org/fstream-ignore/-/fstream-ignore-1.0.5.tgz",
"integrity": "sha1-nDHa40dnAY/h0kmyTa2mfQktoQU=",
"optional": true, "optional": true,
"requires": { "requires": {
"fstream": "1.0.11", "fstream": "1.0.11",
@ -1644,7 +1683,8 @@
}, },
"gauge": { "gauge": {
"version": "2.7.4", "version": "2.7.4",
"bundled": true, "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
"integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
"optional": true, "optional": true,
"requires": { "requires": {
"aproba": "1.1.1", "aproba": "1.1.1",
@ -1659,7 +1699,8 @@
}, },
"getpass": { "getpass": {
"version": "0.1.7", "version": "0.1.7",
"bundled": true, "resolved": "https://registry.npmjs.org/getpass/-/getpass-0.1.7.tgz",
"integrity": "sha1-Xv+OPmhNVprkyysSgmBOi6YhSfo=",
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "1.0.0" "assert-plus": "1.0.0"
@ -1667,14 +1708,16 @@
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"optional": true "optional": true
} }
} }
}, },
"glob": { "glob": {
"version": "7.1.2", "version": "7.1.2",
"bundled": true, "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
"requires": { "requires": {
"fs.realpath": "1.0.0", "fs.realpath": "1.0.0",
"inflight": "1.0.6", "inflight": "1.0.6",
@ -1686,16 +1729,19 @@
}, },
"graceful-fs": { "graceful-fs": {
"version": "4.1.11", "version": "4.1.11",
"bundled": true "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
"integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
}, },
"har-schema": { "har-schema": {
"version": "1.0.5", "version": "1.0.5",
"bundled": true, "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-1.0.5.tgz",
"integrity": "sha1-0mMTX0MwfALGAq/I/pWXDAFRNp4=",
"optional": true "optional": true
}, },
"har-validator": { "har-validator": {
"version": "4.2.1", "version": "4.2.1",
"bundled": true, "resolved": "https://registry.npmjs.org/har-validator/-/har-validator-4.2.1.tgz",
"integrity": "sha1-M0gdDxu/9gDdID11gSpqX7oALio=",
"optional": true, "optional": true,
"requires": { "requires": {
"ajv": "4.11.8", "ajv": "4.11.8",
@ -1704,12 +1750,14 @@
}, },
"has-unicode": { "has-unicode": {
"version": "2.0.1", "version": "2.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
"integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
"optional": true "optional": true
}, },
"hawk": { "hawk": {
"version": "3.1.3", "version": "3.1.3",
"bundled": true, "resolved": "https://registry.npmjs.org/hawk/-/hawk-3.1.3.tgz",
"integrity": "sha1-B4REvXwWQLD+VA0sm3PVlnjo4cQ=",
"requires": { "requires": {
"boom": "2.10.1", "boom": "2.10.1",
"cryptiles": "2.0.5", "cryptiles": "2.0.5",
@ -1719,11 +1767,13 @@
}, },
"hoek": { "hoek": {
"version": "2.16.3", "version": "2.16.3",
"bundled": true "resolved": "https://registry.npmjs.org/hoek/-/hoek-2.16.3.tgz",
"integrity": "sha1-ILt0A9POo5jpHcRxCo/xuCdKJe0="
}, },
"http-signature": { "http-signature": {
"version": "1.1.1", "version": "1.1.1",
"bundled": true, "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
"integrity": "sha1-33LiZwZs0Kxn+3at+OE0qPvPkb8=",
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "0.2.0", "assert-plus": "0.2.0",
@ -1733,7 +1783,8 @@
}, },
"inflight": { "inflight": {
"version": "1.0.6", "version": "1.0.6",
"bundled": true, "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
"requires": { "requires": {
"once": "1.4.0", "once": "1.4.0",
"wrappy": "1.0.2" "wrappy": "1.0.2"
@ -1741,37 +1792,44 @@
}, },
"inherits": { "inherits": {
"version": "2.0.3", "version": "2.0.3",
"bundled": true "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
}, },
"ini": { "ini": {
"version": "1.3.4", "version": "1.3.4",
"bundled": true, "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.4.tgz",
"integrity": "sha1-BTfLedr1m1mhpRff9wbIbsA5Fi4=",
"optional": true "optional": true
}, },
"is-fullwidth-code-point": { "is-fullwidth-code-point": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
"integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
"requires": { "requires": {
"number-is-nan": "1.0.1" "number-is-nan": "1.0.1"
} }
}, },
"is-typedarray": { "is-typedarray": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
"integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
"optional": true "optional": true
}, },
"isarray": { "isarray": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
"integrity": "sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE="
}, },
"isstream": { "isstream": {
"version": "0.1.2", "version": "0.1.2",
"bundled": true, "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
"integrity": "sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=",
"optional": true "optional": true
}, },
"jodid25519": { "jodid25519": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/jodid25519/-/jodid25519-1.0.2.tgz",
"integrity": "sha1-BtSRIlUJNBlHfUJWM2BuDpB4KWc=",
"optional": true, "optional": true,
"requires": { "requires": {
"jsbn": "0.1.1" "jsbn": "0.1.1"
@ -1779,17 +1837,20 @@
}, },
"jsbn": { "jsbn": {
"version": "0.1.1", "version": "0.1.1",
"bundled": true, "resolved": "https://registry.npmjs.org/jsbn/-/jsbn-0.1.1.tgz",
"integrity": "sha1-peZUwuWi3rXyAdls77yoDA7y9RM=",
"optional": true "optional": true
}, },
"json-schema": { "json-schema": {
"version": "0.2.3", "version": "0.2.3",
"bundled": true, "resolved": "https://registry.npmjs.org/json-schema/-/json-schema-0.2.3.tgz",
"integrity": "sha1-tIDIkuWaLwWVTOcnvT8qTogvnhM=",
"optional": true "optional": true
}, },
"json-stable-stringify": { "json-stable-stringify": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/json-stable-stringify/-/json-stable-stringify-1.0.1.tgz",
"integrity": "sha1-mnWdOcXy/1A/1TAGRu1EX4jE+a8=",
"optional": true, "optional": true,
"requires": { "requires": {
"jsonify": "0.0.0" "jsonify": "0.0.0"
@ -1797,17 +1858,20 @@
}, },
"json-stringify-safe": { "json-stringify-safe": {
"version": "5.0.1", "version": "5.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz",
"integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
"optional": true "optional": true
}, },
"jsonify": { "jsonify": {
"version": "0.0.0", "version": "0.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
"integrity": "sha1-LHS27kHZPKUbe1qu6PUDYx0lKnM=",
"optional": true "optional": true
}, },
"jsprim": { "jsprim": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "resolved": "https://registry.npmjs.org/jsprim/-/jsprim-1.4.0.tgz",
"integrity": "sha1-o7h+QCmNjDgFUtjMdiigu5WiKRg=",
"optional": true, "optional": true,
"requires": { "requires": {
"assert-plus": "1.0.0", "assert-plus": "1.0.0",
@ -1818,48 +1882,56 @@
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"optional": true "optional": true
} }
} }
}, },
"mime-db": { "mime-db": {
"version": "1.27.0", "version": "1.27.0",
"bundled": true "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.27.0.tgz",
"integrity": "sha1-gg9XIpa70g7CXtVeW13oaeVDbrE="
}, },
"mime-types": { "mime-types": {
"version": "2.1.15", "version": "2.1.15",
"bundled": true, "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.15.tgz",
"integrity": "sha1-pOv1BkCUVpI3uM9wBGd20J/JKu0=",
"requires": { "requires": {
"mime-db": "1.27.0" "mime-db": "1.27.0"
} }
}, },
"minimatch": { "minimatch": {
"version": "3.0.4", "version": "3.0.4",
"bundled": true, "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
"requires": { "requires": {
"brace-expansion": "1.1.7" "brace-expansion": "1.1.7"
} }
}, },
"minimist": { "minimist": {
"version": "0.0.8", "version": "0.0.8",
"bundled": true "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.8.tgz",
"integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0="
}, },
"mkdirp": { "mkdirp": {
"version": "0.5.1", "version": "0.5.1",
"bundled": true, "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.1.tgz",
"integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
"requires": { "requires": {
"minimist": "0.0.8" "minimist": "0.0.8"
} }
}, },
"ms": { "ms": {
"version": "2.0.0", "version": "2.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
"integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
"optional": true "optional": true
}, },
"node-pre-gyp": { "node-pre-gyp": {
"version": "0.6.39", "version": "0.6.39",
"bundled": true, "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.6.39.tgz",
"integrity": "sha512-OsJV74qxnvz/AMGgcfZoDaeDXKD3oY3QVIbBmwszTFkRisTSXbMQyn4UWzUMOtA5SVhrBZOTp0wcoSBgfMfMmQ==",
"optional": true, "optional": true,
"requires": { "requires": {
"detect-libc": "1.0.2", "detect-libc": "1.0.2",
@ -1877,7 +1949,8 @@
}, },
"nopt": { "nopt": {
"version": "4.0.1", "version": "4.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
"integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
"optional": true, "optional": true,
"requires": { "requires": {
"abbrev": "1.1.0", "abbrev": "1.1.0",
@ -1886,7 +1959,8 @@
}, },
"npmlog": { "npmlog": {
"version": "4.1.0", "version": "4.1.0",
"bundled": true, "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.0.tgz",
"integrity": "sha512-ocolIkZYZt8UveuiDS0yAkkIjid1o7lPG8cYm05yNYzBn8ykQtaiPMEGp8fY9tKdDgm8okpdKzkvu1y9hUYugA==",
"optional": true, "optional": true,
"requires": { "requires": {
"are-we-there-yet": "1.1.4", "are-we-there-yet": "1.1.4",
@ -1897,38 +1971,45 @@
}, },
"number-is-nan": { "number-is-nan": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
"integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0="
}, },
"oauth-sign": { "oauth-sign": {
"version": "0.8.2", "version": "0.8.2",
"bundled": true, "resolved": "https://registry.npmjs.org/oauth-sign/-/oauth-sign-0.8.2.tgz",
"integrity": "sha1-Rqarfwrq2N6unsBWV4C31O/rnUM=",
"optional": true "optional": true
}, },
"object-assign": { "object-assign": {
"version": "4.1.1", "version": "4.1.1",
"bundled": true, "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
"integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
"optional": true "optional": true
}, },
"once": { "once": {
"version": "1.4.0", "version": "1.4.0",
"bundled": true, "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
"requires": { "requires": {
"wrappy": "1.0.2" "wrappy": "1.0.2"
} }
}, },
"os-homedir": { "os-homedir": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
"integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
"optional": true "optional": true
}, },
"os-tmpdir": { "os-tmpdir": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
"integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
"optional": true "optional": true
}, },
"osenv": { "osenv": {
"version": "0.1.4", "version": "0.1.4",
"bundled": true, "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.4.tgz",
"integrity": "sha1-Qv5tWVPfBsgGS+bxdsPQWqqjRkQ=",
"optional": true, "optional": true,
"requires": { "requires": {
"os-homedir": "1.0.2", "os-homedir": "1.0.2",
@ -1937,30 +2018,36 @@
}, },
"path-is-absolute": { "path-is-absolute": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true "resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
}, },
"performance-now": { "performance-now": {
"version": "0.2.0", "version": "0.2.0",
"bundled": true, "resolved": "https://registry.npmjs.org/performance-now/-/performance-now-0.2.0.tgz",
"integrity": "sha1-M+8wxcd9TqIcWlOGnZG1bY8lVeU=",
"optional": true "optional": true
}, },
"process-nextick-args": { "process-nextick-args": {
"version": "1.0.7", "version": "1.0.7",
"bundled": true "resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-1.0.7.tgz",
"integrity": "sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M="
}, },
"punycode": { "punycode": {
"version": "1.4.1", "version": "1.4.1",
"bundled": true, "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
"integrity": "sha1-wNWmOycYgArY4esPpSachN1BhF4=",
"optional": true "optional": true
}, },
"qs": { "qs": {
"version": "6.4.0", "version": "6.4.0",
"bundled": true, "resolved": "https://registry.npmjs.org/qs/-/qs-6.4.0.tgz",
"integrity": "sha1-E+JtKK1rD/qpExLNO/cI7TUecjM=",
"optional": true "optional": true
}, },
"rc": { "rc": {
"version": "1.2.1", "version": "1.2.1",
"bundled": true, "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.1.tgz",
"integrity": "sha1-LgPo5C7kULjLPc5lvhv4l04d/ZU=",
"optional": true, "optional": true,
"requires": { "requires": {
"deep-extend": "0.4.2", "deep-extend": "0.4.2",
@ -1971,14 +2058,16 @@
"dependencies": { "dependencies": {
"minimist": { "minimist": {
"version": "1.2.0", "version": "1.2.0",
"bundled": true, "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
"integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
"optional": true "optional": true
} }
} }
}, },
"readable-stream": { "readable-stream": {
"version": "2.2.9", "version": "2.2.9",
"bundled": true, "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.2.9.tgz",
"integrity": "sha1-z3jsb0ptHrQ9JkiMrJfwQudLf8g=",
"requires": { "requires": {
"buffer-shims": "1.0.0", "buffer-shims": "1.0.0",
"core-util-is": "1.0.2", "core-util-is": "1.0.2",
@ -1991,7 +2080,8 @@
}, },
"request": { "request": {
"version": "2.81.0", "version": "2.81.0",
"bundled": true, "resolved": "https://registry.npmjs.org/request/-/request-2.81.0.tgz",
"integrity": "sha1-xpKJRqDgbF+Nb4qTM0af/aRimKA=",
"optional": true, "optional": true,
"requires": { "requires": {
"aws-sign2": "0.6.0", "aws-sign2": "0.6.0",
@ -2020,40 +2110,47 @@
}, },
"rimraf": { "rimraf": {
"version": "2.6.1", "version": "2.6.1",
"bundled": true, "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.1.tgz",
"integrity": "sha1-wjOOxkPfeht/5cVPqG9XQopV8z0=",
"requires": { "requires": {
"glob": "7.1.2" "glob": "7.1.2"
} }
}, },
"safe-buffer": { "safe-buffer": {
"version": "5.0.1", "version": "5.0.1",
"bundled": true "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.0.1.tgz",
"integrity": "sha1-0mPKVGls2KMGtcplUekt5XkY++c="
}, },
"semver": { "semver": {
"version": "5.3.0", "version": "5.3.0",
"bundled": true, "resolved": "https://registry.npmjs.org/semver/-/semver-5.3.0.tgz",
"integrity": "sha1-myzl094C0XxgEq0yaqa00M9U+U8=",
"optional": true "optional": true
}, },
"set-blocking": { "set-blocking": {
"version": "2.0.0", "version": "2.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
"integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
"optional": true "optional": true
}, },
"signal-exit": { "signal-exit": {
"version": "3.0.2", "version": "3.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.2.tgz",
"integrity": "sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=",
"optional": true "optional": true
}, },
"sntp": { "sntp": {
"version": "1.0.9", "version": "1.0.9",
"bundled": true, "resolved": "https://registry.npmjs.org/sntp/-/sntp-1.0.9.tgz",
"integrity": "sha1-ZUEYTMkK7qbG57NeJlkIJEPGYZg=",
"requires": { "requires": {
"hoek": "2.16.3" "hoek": "2.16.3"
} }
}, },
"sshpk": { "sshpk": {
"version": "1.13.0", "version": "1.13.0",
"bundled": true, "resolved": "https://registry.npmjs.org/sshpk/-/sshpk-1.13.0.tgz",
"integrity": "sha1-/yo+T9BEl1Vf7Zezmg/YL6+zozw=",
"optional": true, "optional": true,
"requires": { "requires": {
"asn1": "0.2.3", "asn1": "0.2.3",
@ -2069,14 +2166,16 @@
"dependencies": { "dependencies": {
"assert-plus": { "assert-plus": {
"version": "1.0.0", "version": "1.0.0",
"bundled": true, "resolved": "https://registry.npmjs.org/assert-plus/-/assert-plus-1.0.0.tgz",
"integrity": "sha1-8S4PPF13sLHN2RRpQuTpbB5N1SU=",
"optional": true "optional": true
} }
} }
}, },
"string-width": { "string-width": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true, "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
"integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
"requires": { "requires": {
"code-point-at": "1.1.0", "code-point-at": "1.1.0",
"is-fullwidth-code-point": "1.0.0", "is-fullwidth-code-point": "1.0.0",
@ -2085,31 +2184,36 @@
}, },
"string_decoder": { "string_decoder": {
"version": "1.0.1", "version": "1.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.0.1.tgz",
"integrity": "sha1-YuIA8DmVWmgQ2N8KM//A8BNmLZg=",
"requires": { "requires": {
"safe-buffer": "5.0.1" "safe-buffer": "5.0.1"
} }
}, },
"stringstream": { "stringstream": {
"version": "0.0.5", "version": "0.0.5",
"bundled": true, "resolved": "https://registry.npmjs.org/stringstream/-/stringstream-0.0.5.tgz",
"integrity": "sha1-TkhM1N5aC7vuGORjB3EKioFiGHg=",
"optional": true "optional": true
}, },
"strip-ansi": { "strip-ansi": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
"integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
"requires": { "requires": {
"ansi-regex": "2.1.1" "ansi-regex": "2.1.1"
} }
}, },
"strip-json-comments": { "strip-json-comments": {
"version": "2.0.1", "version": "2.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
"integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
"optional": true "optional": true
}, },
"tar": { "tar": {
"version": "2.2.1", "version": "2.2.1",
"bundled": true, "resolved": "https://registry.npmjs.org/tar/-/tar-2.2.1.tgz",
"integrity": "sha1-jk0qJWwOIYXGsYrWlK7JaLg8sdE=",
"requires": { "requires": {
"block-stream": "0.0.9", "block-stream": "0.0.9",
"fstream": "1.0.11", "fstream": "1.0.11",
@ -2118,7 +2222,8 @@
}, },
"tar-pack": { "tar-pack": {
"version": "3.4.0", "version": "3.4.0",
"bundled": true, "resolved": "https://registry.npmjs.org/tar-pack/-/tar-pack-3.4.0.tgz",
"integrity": "sha1-I74tf2cagzk3bL2wuP4/3r8xeYQ=",
"optional": true, "optional": true,
"requires": { "requires": {
"debug": "2.6.8", "debug": "2.6.8",
@ -2133,7 +2238,8 @@
}, },
"tough-cookie": { "tough-cookie": {
"version": "2.3.2", "version": "2.3.2",
"bundled": true, "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.3.2.tgz",
"integrity": "sha1-8IH3bkyFcg5sN6X6ztc3FQ2EByo=",
"optional": true, "optional": true,
"requires": { "requires": {
"punycode": "1.4.1" "punycode": "1.4.1"
@ -2141,7 +2247,8 @@
}, },
"tunnel-agent": { "tunnel-agent": {
"version": "0.6.0", "version": "0.6.0",
"bundled": true, "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
"integrity": "sha1-J6XeoGs2sEoKmWZ3SykIaPD8QP0=",
"optional": true, "optional": true,
"requires": { "requires": {
"safe-buffer": "5.0.1" "safe-buffer": "5.0.1"
@ -2149,26 +2256,31 @@
}, },
"tweetnacl": { "tweetnacl": {
"version": "0.14.5", "version": "0.14.5",
"bundled": true, "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-0.14.5.tgz",
"integrity": "sha1-WuaBd/GS1EViadEIr6k/+HQ/T2Q=",
"optional": true "optional": true
}, },
"uid-number": { "uid-number": {
"version": "0.0.6", "version": "0.0.6",
"bundled": true, "resolved": "https://registry.npmjs.org/uid-number/-/uid-number-0.0.6.tgz",
"integrity": "sha1-DqEOgDXo61uOREnwbaHHMGY7qoE=",
"optional": true "optional": true
}, },
"util-deprecate": { "util-deprecate": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
"integrity": "sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8="
}, },
"uuid": { "uuid": {
"version": "3.0.1", "version": "3.0.1",
"bundled": true, "resolved": "https://registry.npmjs.org/uuid/-/uuid-3.0.1.tgz",
"integrity": "sha1-ZUS7ot/ajBzxfmKaOjBeK7H+5sE=",
"optional": true "optional": true
}, },
"verror": { "verror": {
"version": "1.3.6", "version": "1.3.6",
"bundled": true, "resolved": "https://registry.npmjs.org/verror/-/verror-1.3.6.tgz",
"integrity": "sha1-z/XfEpRtKX0rqu+qJoniW+AcAFw=",
"optional": true, "optional": true,
"requires": { "requires": {
"extsprintf": "1.0.2" "extsprintf": "1.0.2"
@ -2176,7 +2288,8 @@
}, },
"wide-align": { "wide-align": {
"version": "1.1.2", "version": "1.1.2",
"bundled": true, "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
"integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
"optional": true, "optional": true,
"requires": { "requires": {
"string-width": "1.0.2" "string-width": "1.0.2"
@ -2184,7 +2297,8 @@
}, },
"wrappy": { "wrappy": {
"version": "1.0.2", "version": "1.0.2",
"bundled": true "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
} }
} }
}, },

View File

@ -1,4 +1,4 @@
import { EmbeddedViewRef, AfterContentInit, ContentChild, Directive, ElementRef, Input, IterableDiffers, TrackByFunction } from '@angular/core'; import { EmbeddedViewRef, AfterContentInit, ContentChild, Directive, ElementRef, Input, IterableDiffers, TrackByFunction, ChangeDetectorRef } from '@angular/core';
import { VirtualItem } from './virtual-item'; import { VirtualItem } from './virtual-item';
import { VirtualHeader } from './virtual-header'; import { VirtualHeader } from './virtual-header';
import { VirtualFooter } from './virtual-footer'; import { VirtualFooter } from './virtual-footer';
@ -13,7 +13,10 @@ export class VirtualScroll {
@ContentChild(VirtualHeader) hdrTmp: VirtualHeader; @ContentChild(VirtualHeader) hdrTmp: VirtualHeader;
@ContentChild(VirtualFooter) ftrTmp: VirtualFooter; @ContentChild(VirtualFooter) ftrTmp: VirtualFooter;
constructor(private el: ElementRef) { constructor(
private el: ElementRef,
private cd: ChangeDetectorRef,
) {
this.el.nativeElement.itemRender = this.itemRender.bind(this); this.el.nativeElement.itemRender = this.itemRender.bind(this);
} }
@ -27,9 +30,11 @@ export class VirtualScroll {
el = getElement(node); el = getElement(node);
(el as any)['$ionView'] = node; (el as any)['$ionView'] = node;
} }
const ctx = (el as any)['$ionView'].context; const node = (el as any)['$ionView'];
const ctx = node.context;
ctx.$implicit = cell.value; ctx.$implicit = cell.value;
ctx.index = cell.index; ctx.index = cell.index;
node.detectChanges();
return el; return el;
} }

View File

@ -102,7 +102,11 @@ export function updateVDom(dom: VirtualNode[], heightIndex: Uint32Array, cells:
} }
export function doRender(el: HTMLElement, itemRender: ItemRenderFn, dom: VirtualNode[], updateCellHeight: Function, total: number) { export function doRender(
el: HTMLElement,
itemRender: ItemRenderFn,
dom: VirtualNode[],
updateCellHeight: Function) {
const children = el.children; const children = el.children;
let child: HTMLElement; let child: HTMLElement;
for (let i = 0; i < dom.length; i++) { for (let i = 0; i < dom.length; i++) {
@ -137,7 +141,6 @@ export function doRender(el: HTMLElement, itemRender: ItemRenderFn, dom: Virtual
updateCellHeight(cell, child); updateCellHeight(cell, child);
} }
} }
el.style.height = total + 'px';
} }
export function getViewport(scrollTop: number, vierportHeight: number, margin: number): Viewport { export function getViewport(scrollTop: number, vierportHeight: number, margin: number): Viewport {

View File

@ -6,7 +6,7 @@ ion-virtual-scroll {
width: 100%; width: 100%;
contain: content; contain: strict;
} }
.virtual-loading { .virtual-loading {

View File

@ -23,6 +23,7 @@ export class VirtualScroll {
private currentScrollTop = 0; private currentScrollTop = 0;
private indexDirty = 0; private indexDirty = 0;
private totalHeight = 0; private totalHeight = 0;
private heightChanged = false;
@Element() el: HTMLElement; @Element() el: HTMLElement;
@ -196,7 +197,11 @@ export class VirtualScroll {
// write DOM // write DOM
if (this.itemRender) { if (this.itemRender) {
doRender(this.el, this.itemRender, this.virtualDom, this.updateCellHeight.bind(this), this.totalHeight); doRender(this.el, this.itemRender, this.virtualDom, this.updateCellHeight.bind(this));
if (this.heightChanged) {
this.el.style.height = this.totalHeight + 'px';
this.heightChanged = false;
}
} else if (this.domRender) { } else if (this.domRender) {
this.domRender(this.virtualDom, this.totalHeight); this.domRender(this.virtualDom, this.totalHeight);
} }
@ -273,7 +278,11 @@ export class VirtualScroll {
private calcHeightIndex(index = 0) { private calcHeightIndex(index = 0) {
this.heightIndex = resizeBuffer(this.heightIndex, this.cells.length); this.heightIndex = resizeBuffer(this.heightIndex, this.cells.length);
this.totalHeight = calcHeightIndex(this.heightIndex, this.cells, index); const totalHeight = calcHeightIndex(this.heightIndex, this.cells, index);
if (totalHeight !== this.totalHeight) {
this.totalHeight = totalHeight;
this.heightChanged = true;
}
this.indexDirty = Infinity; this.indexDirty = Infinity;
} }

View File

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

View File

@ -12,18 +12,81 @@ import { ToastController } from '@ionic/angular';
<ion-title>Test</ion-title> <ion-title>Test</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content padding>
<ion-virtual-scroll [items]="items"> <ion-content>
<ion-item *virtualItem="let item">{{item}}</ion-item>
<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-virtual-scroll>
</ion-content> </ion-content>
</ion-page> </ion-page>
</ion-app>` </ion-app>`
}) })
export class VirtualScrollPageComponent { export class VirtualScrollPageComponent {
items: string[]; items: any[] = [];
constructor() { 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;