diff --git a/core/src/components/virtual-scroll/virtual-scroll.scss b/core/src/components/virtual-scroll/virtual-scroll.scss index f3e159dc06..14316189a6 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.scss +++ b/core/src/components/virtual-scroll/virtual-scroll.scss @@ -7,6 +7,8 @@ ion-virtual-scroll { width: 100%; contain: strict; + + user-select: none; } .virtual-loading { diff --git a/core/src/components/virtual-scroll/virtual-scroll.tsx b/core/src/components/virtual-scroll/virtual-scroll.tsx index d3744d7a8d..9d2cc17a8d 100644 --- a/core/src/components/virtual-scroll/virtual-scroll.tsx +++ b/core/src/components/virtual-scroll/virtual-scroll.tsx @@ -1,4 +1,4 @@ -import { Component, Element, EventListenerEnable, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; +import { Component, Element, EventListenerEnable, FunctionalComponent, Listen, Method, Prop, QueueApi, State, Watch } from '@stencil/core'; import { Cell, DomRenderFn, HeaderFn, ItemHeightFn, ItemRenderFn, VirtualNode } from '../../interface'; @@ -141,8 +141,6 @@ export class VirtualScroll { @Listen('window:resize') onResize() { - this.indexDirty = 0; - this.calcCells(); this.updateVirtualScroll(); } @@ -378,25 +376,36 @@ export class VirtualScroll { } render() { - const renderItem = this.renderItem; - if (renderItem) { - return this.virtualDom.map(node => { - const item = this.renderVirtualNode(node) as any; - const classes = ['virtual-item']; - if (!item.vattrs) { - item.vattrs = {}; - } - if (!node.visible) { - classes.push('virtual-loading'); - } - item.vattrs.class += classes.join(' '); - if (!item.vattrs.style) { - item.vattrs.style = {}; - } - item.vattrs.style['transform'] = `translate3d(0,${node.top}px,0)`; - return item; - }); + if (this.renderItem) { + return ( + + { this.virtualDom.map(node => this.renderVirtualNode(node)) } + + ); } return undefined; } } + +const VirtualProxy: FunctionalComponent<{dom: VirtualNode[]}> = ({ dom }, children, utils) => { + return utils.map(children, (child, i) => { + const node = dom[i]; + const vattrs = child.vattrs || {}; + let classes = vattrs.class || ''; + classes += 'virtual-item '; + if (!node.visible) { + classes += 'virtual-loading'; + } + return { + ...child, + vattrs: { + ...vattrs, + class: classes, + style: { + ...vattrs.style, + transform: `translate3d(0,${node.top}px,0)` + } + } + }; + }); +};