virtua 0.21.0 → 0.22.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -4
- package/lib/index.js.map +1 -1
- package/lib/index.mjs.map +1 -1
- package/lib/vue/VList.d.ts +2 -30
- package/lib/vue/Virtualizer.d.ts +120 -0
- package/lib/vue/WindowVirtualizer.d.ts +83 -0
- package/lib/vue/index.d.ts +2 -0
- package/lib/vue/index.js +1 -1
- package/lib/vue/index.js.map +1 -1
- package/lib/vue/index.mjs +1 -1
- package/lib/vue/index.mjs.map +1 -1
- package/package.json +12 -9
package/README.md
CHANGED
|
@@ -197,24 +197,26 @@ export default async () => {
|
|
|
197
197
|
|
|
198
198
|
`vue >= 3.2` is required.
|
|
199
199
|
|
|
200
|
+
#### Vertical scroll
|
|
201
|
+
|
|
200
202
|
```vue
|
|
201
203
|
<script setup>
|
|
202
204
|
import { VList } from "virtua/vue";
|
|
203
205
|
|
|
204
|
-
const
|
|
206
|
+
const sizes = [20, 40, 180, 77];
|
|
205
207
|
const data = Array.from({ length: 1000 }).map((_, i) => ({
|
|
206
208
|
id: i,
|
|
207
|
-
|
|
209
|
+
size: sizes[i % 4] + "px",
|
|
208
210
|
}));
|
|
209
211
|
</script>
|
|
210
212
|
|
|
211
213
|
<template>
|
|
212
|
-
<VList :data="data">
|
|
214
|
+
<VList :data="data" :style="{ height: '800px' }">
|
|
213
215
|
<template #default="item">
|
|
214
216
|
<div
|
|
215
217
|
:key="item.id"
|
|
216
218
|
:style="{
|
|
217
|
-
height: item.
|
|
219
|
+
height: item.size,
|
|
218
220
|
background: 'white',
|
|
219
221
|
borderBottom: 'solid 1px #ccc',
|
|
220
222
|
}"
|
|
@@ -226,6 +228,70 @@ const data = Array.from({ length: 1000 }).map((_, i) => ({
|
|
|
226
228
|
</template>
|
|
227
229
|
```
|
|
228
230
|
|
|
231
|
+
#### Horizontal scroll
|
|
232
|
+
|
|
233
|
+
```vue
|
|
234
|
+
<script setup>
|
|
235
|
+
import { VList } from "virtua/vue";
|
|
236
|
+
|
|
237
|
+
const sizes = [40, 180, 77];
|
|
238
|
+
const data = Array.from({ length: 1000 }).map((_, i) => ({
|
|
239
|
+
id: i,
|
|
240
|
+
size: sizes[i % 3] + "px",
|
|
241
|
+
}));
|
|
242
|
+
</script>
|
|
243
|
+
|
|
244
|
+
<template>
|
|
245
|
+
<VList :data="data" horizontal :style="{ height: '400px' }">
|
|
246
|
+
<template #default="item">
|
|
247
|
+
<div
|
|
248
|
+
:key="item.id"
|
|
249
|
+
:style="{
|
|
250
|
+
width: item.size,
|
|
251
|
+
background: 'white',
|
|
252
|
+
borderBottom: 'solid 1px #ccc',
|
|
253
|
+
}"
|
|
254
|
+
>
|
|
255
|
+
{{ item.id }}
|
|
256
|
+
</div>
|
|
257
|
+
</template>
|
|
258
|
+
</VList>
|
|
259
|
+
</template>
|
|
260
|
+
```
|
|
261
|
+
|
|
262
|
+
#### Window scroll
|
|
263
|
+
|
|
264
|
+
```vue
|
|
265
|
+
<script setup>
|
|
266
|
+
import { WindowVirtualizer } from "virtua/vue";
|
|
267
|
+
|
|
268
|
+
const sizes = [20, 40, 180, 77];
|
|
269
|
+
const data = Array.from({ length: 1000 }).map((_, i) => ({
|
|
270
|
+
id: i,
|
|
271
|
+
size: sizes[i % 4] + "px",
|
|
272
|
+
}));
|
|
273
|
+
</script>
|
|
274
|
+
|
|
275
|
+
<template>
|
|
276
|
+
<div :style="{ padding: '200px' }">
|
|
277
|
+
<WindowVirtualizer :data="data">
|
|
278
|
+
<template #default="item">
|
|
279
|
+
<div
|
|
280
|
+
:key="item.index"
|
|
281
|
+
:style="{
|
|
282
|
+
height: item.size,
|
|
283
|
+
background: 'white',
|
|
284
|
+
borderBottom: 'solid 1px #ccc',
|
|
285
|
+
}"
|
|
286
|
+
>
|
|
287
|
+
{{ item.index }}
|
|
288
|
+
</div>
|
|
289
|
+
</template>
|
|
290
|
+
</WindowVirtualizer>
|
|
291
|
+
</div>
|
|
292
|
+
</template>
|
|
293
|
+
```
|
|
294
|
+
|
|
229
295
|
## Documentation
|
|
230
296
|
|
|
231
297
|
- [API reference](./docs/API.md)
|