fix: Account for the height of the leading and trailing slots when ca…

…lculating visible items, fix #685 (#754)
Akryum · Oct 10, 2022 · fe72c43 · fe72c43
1 parent a6e07da
commit fe72c43
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git a/packages/demo/src/components/DynamicScrollerDemo.vue b/packages/demo/src/components/DynamicScrollerDemo.vue
@@ -18,7 +18,11 @@
  The message heights are unknown.
  </div>
  </template>
-
+ <template #after>
+ <div class="notice">
+ You have reached the end.
+ </div>
+ </template>
  <template #default="{ item, index, active }">
  <DynamicScrollerItem
  :item="item"

diff --git a/packages/vue-virtual-scroller/src/components/RecycleScroller.vue b/packages/vue-virtual-scroller/src/components/RecycleScroller.vue
@@ -12,6 +12,7 @@
  <div
  v-if="$slots.before"
  class="vue-recycle-scroller__slot"
+ ref="before"
  >
  <slot
  name="before"
@@ -43,6 +44,7 @@
  <div
  v-if="$slots.after"
  class="vue-recycle-scroller__slot"
+ ref="after"
  >
  <slot
  name="after"
@@ -321,6 +323,18 @@ export default {
  scroll.start -= buffer
  scroll.end += buffer
 
+ // account for leading slot
+ if (this.$refs.before){
+ const lead = this.$refs.before.scrollHeight;
+ scroll.start -= lead;
+ }
+
+ // account for trailing slot
+ if (this.$refs.after){
+ const trail = this.$refs.after.scrollHeight;
+ scroll.end += trail;
+ }
+
  // Variable size mode
  if (itemSize === null) {
  let h