refs #1804 Add buffer for virtual scroll in sidebar
This commit is contained in:
parent
dc6f3664cb
commit
8004f7fa2b
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="tabs">
|
||||
<div class="tabs" id="sidebar_tabs">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick" stretch>
|
||||
<el-tab-pane label="Posts" name="posts"><Posts :account="account" /></el-tab-pane>
|
||||
<el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" /></el-tab-pane>
|
||||
<el-tab-pane label="Media" name="media"><Media :account="account" /></el-tab-pane>
|
||||
<el-tab-pane label="Posts" name="posts"><Posts :account="account" :buffer="buffer" /></el-tab-pane>
|
||||
<el-tab-pane label="Posts and replies" name="posts_and_replies"><PostsAndReplies :account="account" :buffer="buffer" /></el-tab-pane>
|
||||
<el-tab-pane label="Media" name="media"><Media :account="account" :buffer="buffer" /></el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -23,7 +23,15 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
activeName: 'posts'
|
||||
activeName: 'posts',
|
||||
defaultBuffer: 200,
|
||||
buffer: 200
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
const timeline = document.getElementById('sidebar_tabs')
|
||||
if (timeline !== undefined && timeline !== null) {
|
||||
this.buffer = this.defaultBuffer + timeline.getBoundingClientRect().top
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="timeline">
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
|
||||
<toot
|
||||
|
@ -30,7 +30,7 @@ import { Event } from '~/src/renderer/components/event'
|
|||
|
||||
export default {
|
||||
name: 'media',
|
||||
props: ['account'],
|
||||
props: ['account', 'buffer'],
|
||||
components: { Toot },
|
||||
data() {
|
||||
return {
|
||||
|
|
|
@ -16,7 +16,7 @@
|
|||
>
|
||||
</toot>
|
||||
</template>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
|
||||
<toot
|
||||
|
@ -46,7 +46,7 @@ import { Event } from '~/src/renderer/components/event'
|
|||
|
||||
export default {
|
||||
name: 'posts',
|
||||
props: ['account'],
|
||||
props: ['account', 'buffer'],
|
||||
components: { Toot },
|
||||
data() {
|
||||
return {
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div id="timeline">
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" page-mode>
|
||||
<DynamicScroller :items="timeline" :min-item-size="60" class="scroller" :buffer="buffer" page-mode>
|
||||
<template v-slot="{ item, index, active }">
|
||||
<DynamicScrollerItem :item="item" :active="active" :size-dependencies="[item.uri]" :data-index="index">
|
||||
<toot
|
||||
|
@ -30,7 +30,7 @@ import { Event } from '~/src/renderer/components/event'
|
|||
|
||||
export default {
|
||||
name: 'posts-and-replies',
|
||||
props: ['account'],
|
||||
props: ['account', 'buffer'],
|
||||
components: { Toot },
|
||||
data() {
|
||||
return {
|
||||
|
|
Loading…
Reference in New Issue