refactor virtual list
This commit is contained in:
parent
c7e4c5cc80
commit
93635fee6a
|
@ -21,6 +21,7 @@
|
||||||
:headerProps
|
:headerProps
|
||||||
on:scrollToBottom="onScrollToBottom()"
|
on:scrollToBottom="onScrollToBottom()"
|
||||||
on:scrollToTop="onScrollToTop()"
|
on:scrollToTop="onScrollToTop()"
|
||||||
|
on:scrollTopChanged="onScrollTopChanged(event)"
|
||||||
on:initializedVisibleItems="initialize()"
|
on:initializedVisibleItems="initialize()"
|
||||||
/>
|
/>
|
||||||
{{else}}
|
{{else}}
|
||||||
|
@ -58,7 +59,6 @@
|
||||||
import LoadingPage from '../LoadingPage.html'
|
import LoadingPage from '../LoadingPage.html'
|
||||||
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
|
import { focusWithCapture, blurWithCapture } from '../../_utils/events'
|
||||||
import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
|
import { showMoreItemsForCurrentTimeline } from '../../_actions/timeline'
|
||||||
import { virtualListStore } from '../virtualList/virtualListStore' // TODO: hacky, need better way to expose scrollTop
|
|
||||||
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
import { scheduleIdleTask } from '../../_utils/scheduleIdleTask'
|
||||||
import { mark, stop } from '../../_utils/marks'
|
import { mark, stop } from '../../_utils/marks'
|
||||||
|
|
||||||
|
@ -79,7 +79,8 @@
|
||||||
data: () => ({
|
data: () => ({
|
||||||
LoadingFooter,
|
LoadingFooter,
|
||||||
MoreHeaderVirtualWrapper,
|
MoreHeaderVirtualWrapper,
|
||||||
Status
|
Status,
|
||||||
|
scrollTop: 0
|
||||||
}),
|
}),
|
||||||
computed: {
|
computed: {
|
||||||
VirtualListComponent: (timelineType) => {
|
VirtualListComponent: (timelineType) => {
|
||||||
|
@ -156,6 +157,9 @@
|
||||||
console.log('timeline initialize()')
|
console.log('timeline initialize()')
|
||||||
initializeTimeline()
|
initializeTimeline()
|
||||||
},
|
},
|
||||||
|
onScrollTopChanged(scrollTop) {
|
||||||
|
this.set({scrollTop: scrollTop})
|
||||||
|
},
|
||||||
onScrollToBottom() {
|
onScrollToBottom() {
|
||||||
if (!this.store.get('initialized') ||
|
if (!this.store.get('initialized') ||
|
||||||
this.store.get('runningUpdate') ||
|
this.store.get('runningUpdate') ||
|
||||||
|
@ -181,7 +185,7 @@
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
mark('handleItemIdsToAdd')
|
mark('handleItemIdsToAdd')
|
||||||
let scrollTop = virtualListStore.get('scrollTop')
|
let scrollTop = this.get('scrollTop')
|
||||||
let shouldShowHeader = this.store.get('shouldShowHeader')
|
let shouldShowHeader = this.store.get('shouldShowHeader')
|
||||||
let showHeader = this.store.get('showHeader')
|
let showHeader = this.store.get('showHeader')
|
||||||
//console.log('handleItemIdsToAdd', (itemIdsToAdd && itemIdsToAdd.length) || 0)
|
//console.log('handleItemIdsToAdd', (itemIdsToAdd && itemIdsToAdd.length) || 0)
|
||||||
|
|
|
@ -78,8 +78,9 @@
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
this.observe('distanceFromTop', (distanceFromTop) => {
|
this.observe('scrollTop', (scrollTop) => {
|
||||||
if (distanceFromTop === 0) {
|
this.fire('scrollTopChanged', scrollTop)
|
||||||
|
if (scrollTop === 0) {
|
||||||
this.fireScrollToTop()
|
this.fireScrollToTop()
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
@ -98,7 +99,7 @@
|
||||||
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
|
distanceFromBottom: ($scrollHeight, $scrollTop, $offsetHeight) => {
|
||||||
return $scrollHeight - $scrollTop - $offsetHeight
|
return $scrollHeight - $scrollTop - $offsetHeight
|
||||||
},
|
},
|
||||||
distanceFromTop: ($scrollTop) => $scrollTop,
|
scrollTop: ($scrollTop) => $scrollTop,
|
||||||
// TODO: bug in svelte store, shouldn't need to do this
|
// TODO: bug in svelte store, shouldn't need to do this
|
||||||
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
|
allVisibleItemsHaveHeight: ($allVisibleItemsHaveHeight) => $allVisibleItemsHaveHeight,
|
||||||
// TODO: hack to avoid getting called too often
|
// TODO: hack to avoid getting called too often
|
||||||
|
|
Loading…
Reference in New Issue