CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2020-12-12 6b3195b4ca88a33044bcd014e8c5d090710e7fbb
提交 | 用户 | age
2f6253 1 <template>
陈 2   <div class="p-4 virtual-scroll-demo">
3     <Divider>基础滚动示例</Divider>
4     <div class="virtual-scroll-demo-wrap">
6b3195 5       <VScroll :itemHeight="41" :items="data" :height="300" :width="300">
2f6253 6         <template v-slot="{ item }">
陈 7           <div class="virtual-scroll-demo__item">{{ item.title }}</div>
8         </template>
6b3195 9       </VScroll>
2f6253 10     </div>
陈 11
03b602 12     <Divider>即使不可见，也预先加载50条数据，防止空白</Divider>
2f6253 13     <div class="virtual-scroll-demo-wrap">
6b3195 14       <VScroll :itemHeight="41" :items="data" :height="300" :width="300" :bench="50">
2f6253 15         <template v-slot="{ item }">
陈 16           <div class="virtual-scroll-demo__item">{{ item.title }}</div>
17         </template>
6b3195 18       </VScroll>
2f6253 19     </div>
陈 20   </div>
21 </template>
22 <script lang="ts">
23   import { defineComponent } from 'vue';
6b3195 24   import { VScroll } from '/@/components/VirtualScroll/index';
2f6253 25
陈 26   import { Divider } from 'ant-design-vue';
27   const data: any[] = (() => {
28     const arr: any[] = [];
29     for (let index = 1; index < 20000; index++) {
30       arr.push({
31         title: '列表项' + index,
32       });
33     }
34     return arr;
35   })();
36   export default defineComponent({
6b3195 37     components: { VScroll: VScroll, Divider },
2f6253 38     setup() {
陈 39       return { data: data };
40     },
41   });
42 </script>
43 <style lang="less" scoped>
44   .virtual-scroll-demo {
45     &-wrap {
46       display: flex;
47       margin: 0 30%;
48       background: #fff;
49       justify-content: center;
50     }
51
16117a 52     &__item {
2f6253 53       height: 40px;
陈 54       padding: 0 20px;
55       line-height: 40px;
56       border-bottom: 1px solid #ddd;
57     }
58   }
59 </style>