pinafore/routes/_components/VirtualList.html

52 lines
1.4 KiB
HTML
Raw Normal View History

2018-01-16 01:12:07 +01:00
<:Window bind:scrollY='scrollY' bind:innerHeight='innerHeight' />
<div class="virtual-list" ref:node style="height: {{$height}}px;">
<!-- <div class="virtual-list-viewport" ref:viewport></div> -->
2018-01-16 01:35:08 +01:00
{{#each $visibleItems as item, index @key}}
2018-01-15 19:54:02 +01:00
<VirtualListItem :component
2018-01-16 01:12:07 +01:00
offset="{{item.offset}}"
2018-01-16 01:35:08 +01:00
props="{{item.props}}"
key="{{item.key}}"
index="{{item.index}}"
/>
2018-01-15 19:54:02 +01:00
{{/each}}
</div>
<style>
.virtual-list {
position: relative;
}
</style>
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
2018-01-16 01:35:08 +01:00
import debounce from 'lodash/debounce'
2018-01-15 19:54:02 +01:00
export default {
oncreate() {
2018-01-16 01:12:07 +01:00
this.observe('innerHeight', innerHeight => {
2018-01-16 01:35:08 +01:00
console.log('setting innerHeight', innerHeight)
2018-01-16 01:12:07 +01:00
this.store.set({
innerHeight: innerHeight
})
})
this.observe('items', (items) => {
2018-01-16 01:35:08 +01:00
console.log('setting items')
2018-01-16 01:12:07 +01:00
this.store.set({
'items': items
})
2018-01-15 19:54:02 +01:00
})
2018-01-16 01:35:08 +01:00
this.observe('scrollY', debounce((scrollY) => {
console.log('setting scrollY', scrollY)
2018-01-16 01:12:07 +01:00
this.store.set({
scrollTop: scrollY
})
2018-01-16 01:35:08 +01:00
}, 2000))
2018-01-15 19:54:02 +01:00
},
data: () => ({
component: null
2018-01-15 19:54:02 +01:00
}),
store: () => virtualListStore,
2018-01-15 19:54:02 +01:00
components: {
VirtualListItem
}
}
</script>