install

pnpm i vue3-virtual-scroll-list-component
or
npm i vue3-virtual-scroll-list-component

use

1<template>
2  <div style="height: 600px;">
3    <VirtualScrollList :source-data="accountData" :item-height="90" v-slot="slotProps">
4      <template v-for="(item, index) in (slotProps.viewList as AccountDataItem[])" :key="item.id">
5        <div class="list-itembox" :style="`height: ${slotProps.itemHeight}px`">
6          <p class="action"
7            :style="{ backgroundColor: index % 2 === 0 ? '#f2ddde' : '#dff1d8', color: index % 2 === 0 ? '#ae8286' : '#8ea189' }">
8            <span class="date">
9              {{ item.date }}
10            </span>
11            <button class="delete" @click="deleteItem(item.id)">删除</button>
12          </p>
13          <div class="info">
14            <p class="nanoid">{{ item.id }}</p>
15            <p class="detail">{{ item.detail }}</p>
16            <p class="state"><span v-if="item.state">支出</span><span v-else>收入</span></p>
17            <p class="money">{{ item.money }}元</p>
18          </div>
19        </div>
20      </template>
21
22    </VirtualScrollList>
23  </div>
24</template>
25​
26<script lang="ts" setup>
27import { ref, reactive, onMounted, Ref, defineComponent } from 'vue'
28import { nanoid } from 'nanoid'
29import VirtualScrollList from 'vue3-virtual-scroll-list-component'
30import 'vue3-virtual-scroll-list-component/css'
31
32defineComponent({
33  VirtualScrollList
34})
35
36interface AccountDataItem {
37  date: string //日期
38  state: number //收支状态 0为收入 1为支出
39  detail: string //详情
40  money: number //花费或收入
41  id: string,
42}
43//原始数据
44const accountData = ref<AccountDataItem[]>([])
45
46
47//获取原始数据
48const getData = (): Promise<AccountDataItem[]> => {
49  const data: AccountDataItem[] = []
50  return new Promise(resolve => {
51    for (let i = 0; i < 10000; i++) {
52      data.push(
53        {
54          date: `2023-03-28`,
55          id: nanoid(),
56          state: 0,
57          detail: `ACG${i}`,
58          money: 1800
59        },
60        {
61          date: `2023-03-29`,
62          id: nanoid(),
63          state: 1,
64          detail: `ACG${i}`,
65          money: 2000
66        })
67    }
68    resolve(data)
69  })
70}
71const deleteItem = (targetId) => {
72  accountData.value = accountData.value.filter(item => item.id !== targetId)
73
74}
75onMounted(async () => {
76  accountData.value = await getData()
77})
78</script>
79​
80<style scoped lang='scss'>
81p {
82  margin: 0;
83  padding: 0;
84}
85
86#main-bg {
87  margin: 0 auto;
88}
89
90
91.list-itembox {
92  margin: 10px 0;
93  border: 1px #EEEEEE solid;
94  border-radius: 8px;
95  width: 70vw;
96
97  .action {
98    display: flex;
99    justify-content: space-between;
100    align-items: center;
101    padding: 0 5px;
102  }
103
104  .date {
105    font-size: 14px;
106    line-height: 14px;
107    padding: 10px;
108  }
109
110  .delete {
111    font-size: 12px;
112    line-height: 18px;
113    height: 18px;
114    width: 38px;
115    padding: 0 5px;
116    color: white;
117    background-color: red;
118
119  }
120
121  .info {
122    display: grid;
123    grid-template-columns: 80px auto auto auto;
124    justify-content: space-between;
125    font-size: 15px;
126    line-height: 15px;
127    text-align: left;
128    padding: 10px 15px;
129
130  }
131}
132</style>
133​