39 lines
1 KiB
HTML
39 lines
1 KiB
HTML
<:Window bind:scrollY='scrollY'/>
|
|
<div class="virtual-list" ref:node style="height: {{$height}}px;">
|
|
<!-- <div class="virtual-list-viewport" ref:viewport></div> -->
|
|
{{#each $virtualItems as virtualItem, virtualIndex}}
|
|
<VirtualListItem :component
|
|
props="{{virtualItem.props}}"
|
|
index="{{virtualItem.index}}"
|
|
key="{{virtualItem.key}}"
|
|
/>
|
|
{{/each}}
|
|
</div>
|
|
<style>
|
|
.virtual-list {
|
|
position: relative;
|
|
}
|
|
</style>
|
|
<script>
|
|
import VirtualListItem from './VirtualListItem'
|
|
import { virtualListStore } from '../_utils/virtualListStore'
|
|
|
|
export default {
|
|
oncreate() {
|
|
this.observe('items', (items) => {
|
|
this.store.set({'items': items})
|
|
})
|
|
this.observe('scrollY', (scrollY) => {
|
|
console.log('scrollY', scrollY)
|
|
this.store.set({scrollTop: scrollY})
|
|
})
|
|
},
|
|
data: () => ({
|
|
component: null
|
|
}),
|
|
store: () => virtualListStore,
|
|
components: {
|
|
VirtualListItem
|
|
}
|
|
}
|
|
</script> |