feat(VirtualScroll): improve scroll update quasarframework#9329, quas…

…arframework#14773
pdanpdan · Oct 21, 2023 · f0f910c · f0f910c
1 parent a4e8947
commit f0f910c
Show file tree

Hide file tree

Showing 4 changed files with 156 additions and 76 deletions.
diff --git a/docs/src/examples/QVirtualScroll/GenerateItems.vue b/docs/src/examples/QVirtualScroll/GenerateItems.vue
@@ -7,23 +7,25 @@
     separator
   >
     <template v-slot="{ item, index }">
-      <async-component :key="index" :index="item.index" :sent="item.sent"></async-component>
+      <async-component :key="index" :index="item.index" :sent="item.sent" :text="item.text"></async-component>
     </template>
   </q-virtual-scroll>
 </template>
 
 <script>
-const size = 100000
+const size = 400000
 const allItems = Array(size).fill(null).map((_, index) => ({
   index,
-  sent: Math.random() > 0.5
+  sent: Math.random() > 0.5,
+  text: [ Array(1 + Math.floor(Math.random() * 3)).fill(`Message with id ${index + 1}`).join(' | ') ]
 }))
 
 export default {
   components: {
     asyncComponent: {
       props: {
         index: Number,
+        text: Array,
         sent: Boolean
       },
 
@@ -40,9 +42,9 @@ export default {
             name: this.sent === true ? 'me' : 'Someone else',
             avatar: this.sent === true ? 'https://cdn.quasar.dev/img/avatar4.jpg' : 'https://cdn.quasar.dev/img/avatar3.jpg',
             stamp: `${Math.floor(this.index / 1000)} minutes ago`,
-            text: [ `Message with id ${this.index}` ]
+            text: this.text
           }
-        }, 300 + Math.random() * 2000)
+        }, 100 + Math.random() * 2000)
       },
 
       beforeDestroy () {
@@ -53,22 +55,23 @@ export default {
         if (this.asyncContent === Object(this.asyncContent)) {
           return h('q-chat-message', {
             staticClass: 'q-mx-sm',
+            style: 'min-height: 72px',
             key: this.index,
             props: this.asyncContent
           })
         }
         else {
           const content = [
-            h('q-skeleton', { staticClass: 'on-left on-right', props: { animation: 'none', type: 'text', width: '150px', height: '100px' } })
+            h('q-skeleton', { staticClass: 'on-left on-right', style: 'transform: none', props: { animation: 'none', type: 'text', width: '150px', height: '50px' } })
           ]
 
           content[this.sent === true ? 'push' : 'unshift'](
             h('q-skeleton', { props: { animation: 'none', type: 'QAvatar' } })
           )
 
           return h('div', {
-            staticClass: `row no-wrap items-center q-mx-sm justify-${this.sent === true ? 'end' : 'start'}`,
-            style: 'height: 78px',
+            staticClass: `row no-wrap items-end q-mx-sm justify-${this.sent === true ? 'end' : 'start'}`,
+            style: 'height: 80px; padding-bottom: 8px',
             key: this.index
           }, content)
         }

diff --git a/ui/dev/src/pages/components/virtual-scroll-2.vue b/ui/dev/src/pages/components/virtual-scroll-2.vue
@@ -5,7 +5,7 @@
         <div class="text-h6 q-my-lg q-pa-lg bg-grey-10 text-white" style="height: 500px">
           Before list
         </div>
-        <q-virtual-scroll component="q-list" :items="heavyList" separator scroll-target="body">
+        <q-virtual-scroll component="q-list" :items="heavyList" separator scroll-target="body" :virtual-scroll-item-size="48">
           <template v-slot="{ item, index }">
             <q-item
               v-if="(index % 3) === 0"

diff --git a/ui/dev/src/pages/components/virtual-scroll-3.vue b/ui/dev/src/pages/components/virtual-scroll-3.vue
@@ -11,7 +11,7 @@
           component="q-list"
           :items-size="size"
           :items-fn="getItems"
-          :virtual-scroll-item-size="5"
+          :virtual-scroll-item-size="57"
           separator
           ref="list"
         >