component

Virtual list

One thousand rows, with only the visible window in the DOM. Scroll inside the list to move the window.

Row 1Virtual item 1 of 1000
Row 2Virtual item 2 of 1000
Row 3Virtual item 3 of 1000
Row 4Virtual item 4 of 1000
Row 5Virtual item 5 of 1000
Row 6Virtual item 6 of 1000
Row 7Virtual item 7 of 1000
Row 8Virtual item 8 of 1000
Row 9Virtual item 9 of 1000
Row 10Virtual item 10 of 1000
Row 11Virtual item 11 of 1000
Row 12Virtual item 12 of 1000

Page code

// Page
<ui.VirtualList items={ model.VirtualRows } height={ 432 } rowheight={ 36 } row={ VirtualRow } />

// Row view
	view VirtualRow(row VirtualRowData) {
		<div class="virtual-row-content">
			<strong class="ui-virtual-title">{ row.Title }</strong>
			<span class="ui-virtual-detail">{ row.Detail }</span>
		</div>
	}

type VirtualRowData struct {
	Title  string
	Detail string
}