pinafore/routes/_components/VirtualList.html
2018-01-16 23:16:15 -08:00

51 lines
1.3 KiB
HTML

<div class="virtual-list">
<!-- <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'
const DISTANCE_FROM_BOTTOM_TO_FIRE = 400
export default {
oncreate () {
this.observe('items', (items) => {
this.store.set({
items: items
})
})
this.observe('distanceFromBottom', (distanceFromBottom) => {
//console.log('distanceFromBottom', distanceFromBottom)
if (distanceFromBottom > 0 && // hack: the first it's reported, it's always 0
distanceFromBottom <= DISTANCE_FROM_BOTTOM_TO_FIRE) {
this.fire('scrollToBottom')
}
})
},
data: () => ({
component: null
}),
store: () => virtualListStore,
components: {
VirtualListItem
},
computed: {
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
return $scrollHeight - $scrollTop - $offsetHeight
}
}
}
</script>