feat(useVirtualList): horizontal list (#2310)

vueuse · Oct 25, 2022 · bcedacd · bcedacd
1 parent a823d86
commit bcedacd
Show file tree

Hide file tree

Showing 3 changed files with 234 additions and 49 deletions.
diff --git a/packages/core/useVirtualList/component.ts b/packages/core/useVirtualList/component.ts
@@ -35,7 +35,8 @@ export const UseVirtualList = defineComponent<UseVirtualListProps>({
 
     const { list, containerProps, wrapperProps } = useVirtualList(listRef, props.options)
 
-    containerProps.style.height = props.height || '300px'
+    typeof containerProps.style === 'object' && !Array.isArray(containerProps.style) && (containerProps.style.height = props.height || '300px')
+
     return () => h('div',
       { ...containerProps },
       [

diff --git a/packages/core/useVirtualList/index.md b/packages/core/useVirtualList/index.md
@@ -27,9 +27,10 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 | State      | Type     | Description                                                                                     |
 |------------|----------|-------------------------------------------------------------------------------------------------|
 | itemHeight | `number` | ensure that the total height of the `wrapper` element is calculated correctly.*                 |
+| itemWidth  | `number` | ensure that the total width of the `wrapper` element is calculated correctly.*                  |
 | overscan   | `number` | number of pre-rendered DOM nodes. Prevents whitespace between items if you scroll very quickly. |
 
-\* The `itemHeight` must be kept in sync with the height of each row rendered. If you are seeing extra whitespace or jitter when scrolling to the bottom of the list, ensure the `itemHeight` is the same height as the row.
+\* The `itemHeight` or `itemWidth` must be kept in sync with the height of each row rendered. If you are seeing extra whitespace or jitter when scrolling to the bottom of the list, ensure the `itemHeight` or `itemWidth` is the same height as the row.
 
 ### Reactive list
 
@@ -63,6 +64,33 @@ const { list, containerProps, wrapperProps } = useVirtualList(
 </template>
 ```
 
+### Horizontal list
+
+```typescript
+import { useVirtualList } from '@vueuse/core'
+
+const allItems = Array.from(Array(99999).keys())
+
+const { list, containerProps, wrapperProps } = useVirtualList(
+  allItems,
+  {
+    itemWidth: 200,
+  },
+)
+```
+
+```html
+<template>
+  <div v-bind="containerProps" style="height: 300px">
+    <div v-bind="wrapperProps">
+      <div v-for="item in list" :key="item.index" style="width: 200px">
+        Row: {{ item.data }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
 ## Component Usage
 
 ```html