pinafore/routes/_components/VirtualList.html

39 lines
1 KiB
HTML
Raw Normal View History

<: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}}
2018-01-15 18:54:02 +00:00
<VirtualListItem :component
props="{{virtualItem.props}}"
index="{{virtualItem.index}}"
key="{{virtualItem.key}}"
/>
2018-01-15 18:54:02 +00:00
{{/each}}
</div>
<style>
.virtual-list {
position: relative;
}
</style>
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
2018-01-15 18:54:02 +00:00
export default {
oncreate() {
this.observe('items', (items) => {
this.store.set({'items': items})
2018-01-15 18:54:02 +00:00
})
this.observe('scrollY', (scrollY) => {
console.log('scrollY', scrollY)
this.store.set({scrollTop: scrollY})
2018-01-15 18:54:02 +00:00
})
},
data: () => ({
component: null
2018-01-15 18:54:02 +00:00
}),
store: () => virtualListStore,
2018-01-15 18:54:02 +00:00
components: {
VirtualListItem
}
}
</script>