kinda working better

This commit is contained in:
Nolan Lawson 2018-01-15 16:35:08 -08:00
parent 21a2b4251e
commit 1528d51290
4 changed files with 35 additions and 37 deletions

View file

@ -25,11 +25,12 @@
<script>
export default {
computed: {
imagePromise: (account) => new Promise((resolve, reject) => {
imageSrc: (account) => account.avatar,
imagePromise: (imageSrc) => new Promise((resolve, reject) => {
let img = new Image()
img.onload = resolve
img.onerror = reject
img.src = account.avatar
img.src = imageSrc
})
}
}

View file

@ -1,12 +1,12 @@
<: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> -->
{{#each $visibleItems as item, virtualIndex}}
{{#each $visibleItems as item, index @key}}
<VirtualListItem :component
offset="{{item.offset}}"
props="{{item.item.props}}"
index="{{item.item.index}}"
key="{{item.item.key}}"
props="{{item.props}}"
key="{{item.key}}"
index="{{item.index}}"
/>
{{/each}}
</div>
@ -18,29 +18,28 @@
<script>
import VirtualListItem from './VirtualListItem'
import { virtualListStore } from '../_utils/virtualListStore'
import debounce from 'lodash/debounce'
export default {
oncreate() {
console.log('scrollHeight', this.refs.node.scrollHeight)
this.store.set({
scrollHeight: this.refs.node.scrollHeight,
})
this.observe('innerHeight', innerHeight => {
console.log('setting innerHeight', innerHeight)
this.store.set({
innerHeight: innerHeight
})
})
this.observe('items', (items) => {
console.log('setting items')
this.store.set({
'items': items
})
})
this.observe('scrollY', (scrollY) => {
console.log('scrollY', scrollY)
this.observe('scrollY', debounce((scrollY) => {
console.log('setting scrollY', scrollY)
this.store.set({
scrollTop: scrollY
})
})
}, 2000))
},
data: () => ({
component: null

View file

@ -1,8 +1,8 @@
<div class="virtual-list-item"
ref:node
style="transform: translate3d(0, {{offset}}px, 0);"
data-virtual-index="{{index}}"
data-virtual-key="{{key}}"
data-virtual-index="{{index}}"
>
<:Component {component} virtualProps="{{props}}" />
</div>
@ -18,9 +18,13 @@
export default {
oncreate() {
'VirtualListItem: oncreate'
let itemHeights = this.store.get('itemHeights')
itemHeights[this.get('key')] = this.refs.node.offsetHeight
this.store.set({itemHeights: itemHeights})
let key = this.get('key')
itemHeights[key] = this.refs.node.offsetHeight
this.store.set({
itemHeights: itemHeights
})
},
store: () => virtualListStore
}

View file

@ -8,46 +8,40 @@ class VirtualListStore extends Store {
const virtualListStore = new VirtualListStore({
items: [],
itemHeights: {},
scrollTop: 0,
scrollHeight: 0
})
virtualListStore.compute('virtualItems', ['items'], (items) => {
return items.map((item, idx) => ({
props: item.props,
key: item.key,
index: idx
}))
scrollTop: 0
})
virtualListStore.compute('visibleItems',
['virtualItems', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
(virtualItems, scrollTop, height, itemHeights, innerHeight) => {
['items', 'scrollTop', 'height', 'itemHeights', 'innerHeight'],
(items, scrollTop, height, itemHeights, innerHeight) => {
let visibleItems = []
let currentOffset = 0
virtualItems.forEach(item => {
let height = itemHeights[item.key] || 0
console.log(item.key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
items.forEach((item, index) => {
let { props, key } = item
let height = itemHeights[key] || 0
console.log(key, 'scrollTop', scrollTop, 'currentOffset', currentOffset, 'innerHeight', innerHeight)
if (
((currentOffset < scrollTop) && (scrollTop - RENDER_BUFFER < currentOffset)) ||
((currentOffset >= scrollTop) && (currentOffset < (scrollTop + innerHeight + RENDER_BUFFER)))
) {
console.log(' rendering', item)
console.log(' rendering', key)
visibleItems.push({
item: item,
offset: currentOffset
offset: currentOffset,
props: props,
key: key,
index: index
})
} else {
console.log('not rendering', item)
console.log('not rendering', key)
}
currentOffset += height
})
return visibleItems
})
virtualListStore.compute('height', ['virtualItems', 'itemHeights'], (virtualItems, itemHeights) => {
virtualListStore.compute('height', ['items', 'itemHeights'], (items, itemHeights) => {
let sum = 0
virtualItems.forEach(item => {
items.forEach(item => {
sum += itemHeights[item.key] || 0
})
return sum