|
| 1 | +<template> |
| 2 | + <FVirtualList |
| 3 | + ref="virtualList" |
| 4 | + class="virtual-scroll-list-vertical" |
| 5 | + dataKey="id" |
| 6 | + :dataSources="dataItems" |
| 7 | + :estimateSize="80" |
| 8 | + :height="height" |
| 9 | + @toTop="handleToTop" |
| 10 | + @toBottom="handleToBottom" |
| 11 | + > |
| 12 | + <template #default="{ source, index }"> |
| 13 | + <div :data-index="index" class="item-inner"> |
| 14 | + <div class="head"> |
| 15 | + <span># {{ source.index }}</span> |
| 16 | + <span>{{ source.name }}</span> |
| 17 | + </div> |
| 18 | + <div class="desc">{{ source.desc }}</div> |
| 19 | + </div> |
| 20 | + </template> |
| 21 | + </FVirtualList> |
| 22 | +</template> |
| 23 | + |
| 24 | +<script> |
| 25 | +import { ref } from 'vue'; |
| 26 | +
|
| 27 | +export default { |
| 28 | + name: 'Vertical', |
| 29 | + setup() { |
| 30 | + const virtualList = ref(null); |
| 31 | + const height = ref(400); |
| 32 | + const sentence3 = [ |
| 33 | + 'BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。', |
| 34 | + 'IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)', |
| 35 | + 'margin 重合，margin 塌陷', |
| 36 | + 'html5IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)IFC(Inline Formatting Contexts)直译为”内联格式化上下文”，IFC的line box（线框）高度由其包含行内元素中最高的实际高度计算而来（不受到竖直方向的padding/margin影响)', |
| 37 | + ]; |
| 38 | + const genUniqueId = (prefix) => { |
| 39 | + return `${prefix}$${Math.random().toString(16).substr(9)}`; |
| 40 | + }; |
| 41 | + const getSentences = () => { |
| 42 | + const index = Math.floor(Math.random() * (sentence3.length - 1)); |
| 43 | + return sentence3[index]; |
| 44 | + }; |
| 45 | + const TOTAL_COUNT = 1000; |
| 46 | + const dataItems = ref([]); |
| 47 | +
|
| 48 | + const createData = (length, startIndex, isAdd = true) => { |
| 49 | + const result = []; |
| 50 | + let count = length; |
| 51 | + while (count--) { |
| 52 | + const index = isAdd ? startIndex + length - count - 1 : startIndex - count - 1; |
| 53 | + result.push({ |
| 54 | + index, |
| 55 | + name: `${Math.random()}`, |
| 56 | + id: genUniqueId(index), |
| 57 | + desc: getSentences(), |
| 58 | + }); |
| 59 | + } |
| 60 | + return result; |
| 61 | + }; |
| 62 | +
|
| 63 | + dataItems.value = createData(TOTAL_COUNT, 1); |
| 64 | +
|
| 65 | + const handleToBottom = () => { |
| 66 | + dataItems.value = [...dataItems.value, ...createData(10, dataItems.value[dataItems.value.length - 1].index + 1)]; |
| 67 | + }; |
| 68 | + const handleToTop = () => { |
| 69 | + dataItems.value = [...createData(10, dataItems.value[0].index, false), ...dataItems.value]; |
| 70 | + setTimeout(() => { |
| 71 | + virtualList.value.scrollToIndex(10); |
| 72 | + }, 0); |
| 73 | + }; |
| 74 | + return { |
| 75 | + virtualList, |
| 76 | + dataItems, |
| 77 | + height, |
| 78 | + handleToBottom, |
| 79 | + handleToTop, |
| 80 | + }; |
| 81 | + }, |
| 82 | +}; |
| 83 | +</script> |
| 84 | + |
| 85 | +<style scoped> |
| 86 | +.virtual-scroll-list-vertical .item-inner .head { |
| 87 | + font-weight: 500; |
| 88 | +} |
| 89 | +.virtual-scroll-list-vertical .item-inner .head span:first-child { |
| 90 | + margin-right: 1em; |
| 91 | +} |
| 92 | +.virtual-scroll-list-vertical .item-inner .desc { |
| 93 | + margin-top: 0.5em; |
| 94 | + margin-bottom: 1em; |
| 95 | + text-align: justify; |
| 96 | +} |
| 97 | +</style> |
0 commit comments