is governed by the containing ion-content and does not render Renders whenever it wants which could be while the user is scrolling. Immediately makes a HTTP request for the image file. element because when an element is added to the DOM, it
We recommend using the component over the native It's vital that elements within a virtual item does not dynamically change.įor virtual scrolling, the natural effects of the are not desirableįeatures. Simply put, to ensure rendering bugs are not introduced, It's also important for app developers to ensure image sizes are locked in,Īnd after images have fully loaded they do not change size and affect any When not to render images, and only loads the images that are viewableĪfter scrolling. Quickly, knows when and when not to make requests, when and To manage HTTP requests and image rendering. In order to better control images, Ionic provides HTTP requests, image decoding, and image rendering can cause jank while Slightly different heights between platforms, which is perfectly fine. It's also important to know that Ionic's default item sizes have Is only used to help calculate initial dimensions. Of each cell comes from the app's CSS, whereas this approximation The approximate width and height of each template is used to helpĭetermine how many cells should be created, and to help calculate An exact pixel-perfect size is not necessary,īut without an estimate the virtual scroll will not render correctly.
If the height of items in the virtual scroll are not close to theĭefault size of 40px, it is extremely important to provide a value for The following documentation applies to the ion-virtual-scroll component. Vue įor virtual scrolling options in Ionic Vue, please see Vue Virtual Scroll Guide. React įor virtual scrolling options in Ionic React, please see React Virtual Scroll Guide. Angular įor virtual scrolling options in Ionic Angular, please see Angular Virtual Scroll Guide. 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. 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. In the list is rendered at once instead a small subset of records (enough to fill the viewport)Īre rendered and reused as the user scrolls. For performance reasons, not every record The template created for each record, referred to as a cell, canĬonsist of items, headers, and footers. Is passed to the virtual scroll containing the data to create templatesįor.
Virtual Scroll displays a virtual, "infinite" list.
0 kommentar(er)
