javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(virtual-scroll): deprecate virtual scroll in favor of CDK Scroller (#23444)

Browse Source 
Deprecates `ion-virtual-scroll` in favor of CDK Scroller. See PR for migration and docs information.
This commit is contained in:
Liam DeBeasi
2021-06-10 16:25:18 -04:00
committed by GitHub
parent 0e38d42761
commit 42d133dac4
2 changed files with 21 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
core/src/components/virtual-scroll/readme.md
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 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 ## 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 and footer functions. These functions are called for every record in the
dataset, so please make sure they're performant. 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.
<!-- Auto Generated Below --> <!-- Auto Generated Below -->

4
core/src/components/virtual-scroll/virtual-scroll.tsx
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) {