diff --git a/core/src/components/virtual-scroll/readme.md b/core/src/components/virtual-scroll/readme.md index d750870ab7..a15cd98d55 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 https://ionicframework.com/docs/angular/virtual-scroll. + +## React + +For virtual scrolling options in Ionic React, please see: https://ionicframework.com/docs/react/virtual-scroll. + +## Vue + +For virtual scrolling options in Ionic Vue, please see: https://ionicframework.com/docs/vue/virtual-scroll. + +------ + +The following documentation applies to the `ion-virtual-scroll` component. ## Approximate Widths and Heights @@ -97,14 +114,6 @@ kill its performance is to perform any DOM operations within section header and footer functions. These functions are called for every record in the dataset, so please make sure they're performant. -## React - -The Virtual Scroll component is not supported in React. - -## Vue - -`ion-virtual-scroll` is not supported in Vue. We plan on integrating with existing community-driven solutions for virtual scroll in the near future. Follow our [GitHub issue thread](https://github.com/ionic-team/ionic-framework/issues/17887) for the latest updates. - 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) {