pinafore/routes/_components/VirtualList.html

57 lines
1.4 KiB
HTML

<:Window bind:innerHeight='innerHeight'/>
<div class="virtual-list" style="height: {{$height}}px;">
<!-- <div class="virtual-list-viewport" ref:viewport></div> -->
{{#each $visibleItems as item @key}}
<VirtualListItem :component
offset="{{item.offset}}"
props="{{item.props}}"
key="{{item.key}}"
/>
{{/each}}
</div>
<style>
.virtual-list {
position: relative;
}
</style>
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
import debounce from 'lodash/debounce'
const DEBOUNCE_TIME = 500
export default {
oncreate () {
this.observe('innerHeight', debounce(innerHeight => {
console.log('setting innerHeight', innerHeight)
this.store.set({
innerHeight: innerHeight
})
}, DEBOUNCE_TIME))
this.observe('items', (items) => {
console.log('setting items')
this.store.set({
'items': items
})
})
document.body.querySelector('.container').addEventListener('scroll', debounce((e) => {
this.store.set({
scrollTop: e.target.scrollTop
})
}, DEBOUNCE_TIME, {
leading: true,
trailing: true
}))
},
ondestroy () {
},
data: () => ({
component: null
}),
store: () => virtualListStore,
components: {
VirtualListItem
}
}
</script>