diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index d750870ab7..f58fa33c82 100644 --- a/core/src/components/virtual-scroll/readme.md +++ b/core/src/components/virtual-scroll/readme.md @@ -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) 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 diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index 7633f92307..cc8cac41a7 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -153,6 +153,10 @@ export class VirtualScroll implements ComponentInterface { 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() { const contentEl = this.el.closest('ion-content'); if (!contentEl) {