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

feat(virtual-scroll): adds headerHeight and footerHeight (#18851)

Browse Source 
Currently, if you have an ion-virtual-scroll with a list of items and a search bar for filtering them, when you change the list of items, the items disappear until rendered again, causing a flicker. This could be solved for the items using the itemHeight function to provide the exact height size and bypass some calculations and be more performant etc.

However, if you had a header or footer, they would still flicker. This commit adds two more optional functions named headerHeight and footerHeight that return the exact size of the header and footer respectively and resolve the flicker.
This commit is contained in:
Stefanos Anagnostou
2019-07-24 19:29:16 +03:00
committed by Manu MA
parent c91819c94f
commit 00891119f7
8 changed files with 72 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
core/src/components/virtual-scroll/virtual-scroll.tsx
View File

@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, FunctionalComponent, Listen, Method, Prop, State, Watch, h, readTask, writeTask } from '@stencil/core';
import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
import { Cell, DomRenderFn, FooterHeightFn, HeaderFn, HeaderHeightFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface';
import { CELL_TYPE_FOOTER, CELL_TYPE_HEADER, CELL_TYPE_ITEM } from './constants';
import { Range, calcCells, calcHeightIndex, doRender, findCellIndex, getRange, getShouldUpdate, getViewport, inplaceUpdate, positionForIndex, resizeBuffer, updateVDom } from './virtual-scroll-utils';
@ -104,6 +104,16 @@ export class VirtualScroll implements ComponentInterface {
*/
@Prop() itemHeight?: ItemHeightFn;
/**
* An optional function that maps each item header within their height.
*/
@Prop() headerHeight?: HeaderHeightFn;
/**
* An optional function that maps each item footer within their height.
*/
@Prop() footerHeight?: FooterHeightFn;
/**
* NOTE: only JSX API for stencil.
*
@ -134,6 +144,8 @@ export class VirtualScroll implements ComponentInterface {
@Prop() domRender?: DomRenderFn;
@Watch('itemHeight')
@Watch('headerHeight')
@Watch('footerHeight')
@Watch('items')
itemsChanged() {
this.calcCells();
@ -197,6 +209,8 @@ export class VirtualScroll implements ComponentInterface {
const cells = calcCells(
this.items,
this.itemHeight,
this.headerHeight,
this.footerHeight,
this.headerFn,
this.footerFn,
this.approxHeaderHeight,
@ -357,6 +371,8 @@ export class VirtualScroll implements ComponentInterface {
this.cells = calcCells(
this.items,
this.itemHeight,
this.headerHeight,
this.footerHeight,
this.headerFn,
this.footerFn,
this.approxHeaderHeight,