refactor(virtual-scroll): deprecate virtual scroll in favor of JS framework solutions (#23854)

This commit is contained in:
Liam DeBeasi
2021-08-31 18:20:29 -04:00
committed by GitHub
parent 11fda41420
commit a0229bc7b2
2 changed files with 21 additions and 0 deletions

View File

@ -7,6 +7,23 @@ consist of items, headers, and footers. For performance reasons, not every recor
in the list is rendered at once; instead a small subset of records (enough to fill the viewport) in the list is rendered at once; instead a small subset of records (enough to fill the viewport)
are rendered and reused as the user scrolls. are rendered and reused as the user scrolls.
This guide will go over the recommended virtual scrolling packages for each framework integration as well as documentation for the deprecated `ion-virtual-scroll` component for Ionic Angular. We recommend using the framework-specific solutions listed below, but the `ion-virtual-scroll` documentation is available below for developers who are still using that component.
## Angular
For virtual scrolling options in Ionic Angular, please see [Angular Virtual Scroll Guide](../angular/virtual-scroll).
## React
For virtual scrolling options in Ionic React, please see [React Virtual Scroll Guide](../react/virtual-scroll).
## Vue
For virtual scrolling options in Ionic Vue, please see [Vue Virtual Scroll Guide](../vue/virtual-scroll).
------
The following documentation applies to the `ion-virtual-scroll` component.
## Approximate Widths and Heights ## Approximate Widths and Heights

View File

@ -153,6 +153,10 @@ export class VirtualScroll implements ComponentInterface {
this.updateVirtualScroll(); this.updateVirtualScroll();
} }
componentWillLoad() {
console.warn(`[Deprecation Warning]: ion-virtual-scroll has been deprecated and will be removed in Ionic Framework v7.0. See https://ionicframework.com/docs/angular/virtual-scroll for migration steps.`);
}
async connectedCallback() { async connectedCallback() {
const contentEl = this.el.closest('ion-content'); const contentEl = this.el.closest('ion-content');
if (!contentEl) { if (!contentEl) {