Example for Infinite Scroller

[egloffmark]

I like to use the visualizer to create an infinite-scroller for a list where its content should be extended with the next page of items when the end of the current set / page get reached.

The issue I have is when I add additional elements to the items, then it get not automatically recognized by the virtualizer. So how can I achieve this? e.g.

@customElement('product-scroller')
export class ProductScrollerView extends View {
	
	  @state()
	  data = Array(100)
	  .fill(0)
	  .map((e, i) => {
	    return this.createElement(i);
	  });
		
	render() {
		return html`
			<lit-virtualizer
				.items=${this.data}
				.renderItem=${(item : any) => html`<div><b>${item.name}</b></div>`}
				@visibilityChanged=${this.visibilityChanged}
			>
			</lit-virtualizer>
		`;
	}
	
	visibilityChanged( e: VisibilityChangedEvent) {
		console.log("first:" + e.first + " ,last: " + e.last);
		if (e.last == this.data.length - 1) {
			console.log("end reached!!!");
                        // this is not working, virtualizer seems not to get notified about that the items length has changed
                        // what has here to be changed? 
			for (let i = e.last; i < e.last + 100; i++) {
			  	this.data.push(this.createElement(i));
			}
			console.log(this.data);
		}
	}
	
	createElement(id : any) {
		return {
	      name: `Item ID: ${id}`
	    };
	}
}

[badlogic]

You need to create a new array and assing that to the data property, e.g. this.data = [ ...this.data, ...newData]

where newData is an array only containing the items you want to append.