Visual-Scroll-List-mayag

Description

一个基于vue3的虚拟列表组件

学到了

1. 搭建ui组件库
2. 虚拟列表

• 定高
• 不定高

虚拟列表配置

{
    // 容器的高度
    height: {
      type: Number,
      default: 300
    },
    // 容器的宽度
    width: {
      type: Number,
      default: 300
    },
    // 每一项的高度(预估值)
    itemSize: {
      type: Number,
      default: 30
    },
    // 缓冲区的数量
    bufferCount: {
      type: Number,
      default: 5
    },
    // 数据源
    data: {
      type: Array,
      default: () => []
    },
    // 获取每一项的高度
    getRowSize: {
      type: Function,
      default: () => -1
    },
    // 不定高
    dynamic: {
      type: Boolean,
      default: false
    },
    // loading 状态
    loading: {
      type: Boolean,
      default: false
    }
  },

使用

<script setup lang="tsx">
import { VirtualList } from 'virtual-list-mayag'
import {ref} from "vue";
function generateRandomSentence() {
  const sentenceLength = Math.floor(Math.random() * 10) + 30; // 随机生成句子的长度，5到10个单词

  const words = [
    'The', 'quick', 'brown', 'fox', 'jumps', 'over', 'the', 'lazy', 'dog',
    'A', 'dream', 'is', 'a', 'wish', 'your', 'heart', 'makes',
    'Life', 'is', 'like', 'a', 'box', 'of', 'chocolates',
    'To', 'infinity', 'and', 'beyond',
    'May', 'the', 'Force', 'be', 'with', 'you',
    'Hello', 'world', 'I', 'love', 'coding'
  ];

  const sentence = [];
  for (let i = 0; i < sentenceLength; i++) {
    const randomIndex = Math.floor(Math.random() * words.length);
    sentence.push(words[randomIndex]);
  }

  return sentence.join(' ');
}
const data = ref([])

setTimeout(() => {
  data.value = Array.from({ length: 300 }).map((_, i) => {
    return {
      id: i,
      name: `name${i}`,
      age: i,
      address: `address${i}`,
      content: generateRandomSentence(),
      pic: `https://may-data.oss-cn-hangzhou.aliyuncs.com/myartilepic/sort/image-${i + 1}.png`
    }
  })
}, 1000)
const rowSizes = Array.from({ length: 1000 }).map(() => {
  return 30 + Math.round(Math.random() * 100)
})
const getRowSize = (index: number) => {
  return rowSizes[index]
}

const onReachBottom = () => {
  console.log(1111)
  Array.from({ length: 10 }).forEach(() => {
    data.value.push({
      id: data.value.length,
      name: `name${data.value.length}`,
      age: data.value.length,
      address: `address${data.value.length}`,
      content: `content${data.value.length}`,
      pic: `https://may-data.oss-cn-hangzhou.aliyuncs.com/myartilepic/sort/image-${data.value.length}.png`
    })
  })
}

</script>
<template>
  <div>
    <h2>定高：</h2>
    <VirtualList :data="data" @on-reach-bottom="onReachBottom">
      <template #default="scope">
        <div class="list" :class="scope.row.id % 2 ? 'list-odd' : 'list-even'">{{scope.row.name}}:{{scope.row.age}}:{{scope.row.address}}</div>
      </template>
    </VirtualList>
    <h2>不定高：</h2>
    <VirtualList :data="data" :dynamic="true">
      <template #default="scope">
        <div class="list" :class="scope.row.id % 2 ? 'list-odd' : 'list-even'">{{scope.row.id}}:{{scope.row.content}}</div>
      </template>
    </VirtualList>
  </div>
</template>

<style scoped>
.list {
  width: 100%;
}
.list-odd {
  background-color: orange;
}
.list-even {
  background-color: palegreen;
}
</style>