feat: itemSecondarySize

Author: Akryum

README.md

@@ -187,6 +187,7 @@ When the user scrolls inside RecycleScroller, the views are mostly just moved ar
 - `direction` (default: `'vertical'`): scrolling direction, either `'vertical'` or `'horizontal'`.
 - `itemSize` (default: `null`): display height (or width in horizontal mode) of the items in pixels used to calculate the scroll size and position. If it is set to `null` (the default value), it will use [variable size mode](#variable-size-mode).
 - `gridItems`: display that many items on the same line to create a grid. You must put a value for `itemSize` to use this prop (dynamic sizes are not supported).
+- `itemSecondarySize`: size in pixels (width in vertical mode, height in horizontal mode) of the items in the grid when `gridItems` is set. If `itemSecondarySize` is not set, it will use the value of `itemSize`.
 - `minItemSize`: minimum size used if the height (or width in horizontal mode) of a item is unknown.
 - `sizeField` (default: `'size'`): field used to get the item's size in variable size mode.
 - `typeField` (default: `'type'`): field used to differentiate different kinds of components in the list. For each distinct type, a pool of recycled items will be created.

docs-src/src/components/GridDemo.vue

@@ -51,6 +51,7 @@ export default {
       :items="list"
       :item-size="128"
       :grid-items="gridItems"
+      :item-secondary-size="100"
     >
       <template #default="{ item, index }">
         <div class="item">
@@ -92,6 +93,7 @@ export default {
 
 .item {
   position: relative;
+  height: 100%;
 }
 
 .index {
@@ -108,5 +110,6 @@ img {
   width: 100%;
   height: 100%;
   background: #eee;
+  object-fit: cover;
 }
 </style>

src/components/RecycleScroller.vue

@@ -32,8 +32,8 @@
         :key="view.nr.id"
         :style="ready ? {
           transform: `translate${direction === 'vertical' ? 'Y' : 'X'}(${view.position}px) translate${direction === 'vertical' ? 'X' : 'Y'}(${view.offset}px)`,
-          width: gridItems ? `${itemSize}px` : undefined,
-          height: gridItems ? `${itemSize}px` : undefined,
+          width: gridItems ? `${direction === 'vertical' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
+          height: gridItems ? `${direction === 'horizontal' ? itemSecondarySize || itemSize : itemSize}px` : undefined,
         } : null"
         class="vue-recycle-scroller__item-view"
         :class="[
@@ -107,6 +107,11 @@ export default {
       default: undefined,
     },
 
+    itemSecondarySize: {
+      type: Number,
+      default: undefined,
+    },
+
     minItemSize: {
       type: [Number, String],
       default: null,
@@ -227,6 +232,10 @@ export default {
     gridItems () {
       this.updateVisibleItems(true)
     },
+
+    itemSecondarySize () {
+      this.updateVisibleItems(true)
+    },
   },
 
   created () {
@@ -347,6 +356,7 @@ export default {
     updateVisibleItems (checkItem, checkPositionDiff = false) {
       const itemSize = this.itemSize
       const gridItems = this.gridItems
+      const itemSecondarySize = this.itemSecondarySize || itemSize
       const minItemSize = this.$_computedMinItemSize
       const typeField = this.typeField
       const keyField = this.simpleArray ? null : this.keyField
@@ -570,7 +580,7 @@ export default {
           view.offset = 0
         } else {
           view.position = Math.floor(i / gridItems) * itemSize
-          view.offset = (i % gridItems) * itemSize
+          view.offset = (i % gridItems) * itemSecondarySize
         }
       }