VirtualList 虚拟列表 ​

<template>
  <el-virtual-list
    class="list"
    :list="list"
    :overscan="20"
    :item-size="150"
    style="height: 500px"
    native-scrollbar
  >
    <template #default="{ index, data }">
      <div class="item-content">
        <div>Row {{ index }}</div>
        <el-text v-html="data.text" />
      </div>
    </template>
  </el-virtual-list>
</template>

<script setup>
import { ref } from 'vue'

const textArray = [
  '你是自己故事的作者。<br>',
  '你的生活是你的作品。<br>',
  '挑战是成长的阶梯。<br>',
  '积极面对，挑战不难。<br>',
  '你的未来取决于你现在的选择。<br>',
]

const list = ref(
  Array.from(Array.from({ length: 10000 }).keys()).map((i) => ({
    text: textArray
      .slice(0, Math.ceil(Math.random() * textArray.length))
      .join(''),
  }))
)
</script>

<style lang="scss" scoped>
.item-content {
  box-sizing: border-box;
  padding: 6px 12px;
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
</style>

<template>
  <el-virtual-list
    class="list"
    item-fixed
    :list="list"
    :overscan="20"
    :item-size="50"
    style="height: 500px"
    native-scrollbar
  >
    <template #default="{ index, data }">
      <div class="item-content" :style="{ height: 50 - 8 + 'px' }">
        Row {{ index }} - <el-text>{{ data.text }}</el-text>
      </div>
    </template>
  </el-virtual-list>
</template>

<script setup>
import { ref } from 'vue'

const list = ref(
  Array.from(Array.from({ length: 10000 }).keys()).map((i) => ({
    text: '每一天告诉自己：我能做到，我比昨天更好。',
  }))
)
</script>

<style lang="scss" scoped>
.item-content {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding: 6px 12px;
  margin: 8px 4px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
</style>

<template>
  <el-virtual-list
    class="list-load"
    :list="list"
    :item-size="150"
    style="height: 500px"
    native-scrollbar
    :infinite-scroll="handleLoad"
    :infinite-scroll-disabled="disabled"
  >
    <template #default="{ index, data }">
      <div class="item-content">
        <div>Row {{ index }}</div>
        <el-text v-html="data.text" />
      </div>
    </template>
    <template #after>
      <p class="text">{{ noMore ? 'No more' : 'Loading...' }}</p>
    </template>
  </el-virtual-list>
</template>

<script setup>
import { computed, ref } from 'vue'

const textArray = [
  '你是自己故事的作者。<br>',
  '你的生活是你的作品。<br>',
  '挑战是成长的阶梯。<br>',
  '积极面对，挑战不难。<br>',
  '你的未来取决于你现在的选择。<br>',
]

const generateArray = () =>
  Array.from(Array.from({ length: 10 }).keys()).map((i) => ({
    text: textArray
      .slice(0, Math.ceil(Math.random() * textArray.length))
      .join(''),
  }))

const list = ref(generateArray())

const loading = ref(false)
const noMore = computed(() => list.value.length >= 50)
const disabled = computed(() => loading.value || noMore.value)

const handleLoad = () => {
  if (loading.value) return
  loading.value = true
  setTimeout(() => {
    // list.value.push(...generateArray())
    list.value = [...list.value, ...generateArray()]
    console.log('load more', list.value.length)
    loading.value = false
  }, 1000 * 1)
}
</script>

<style lang="scss" scoped>
.item-content {
  box-sizing: border-box;
  padding: 6px 12px;
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
}

.text {
  text-align: center;
  margin: 6px;
}
</style>

<template>
  <el-virtual-list
    class="list-load"
    :list="list"
    :item-size="150"
    style="height: 500px"
    native-scrollbar
    :load="handleLoad"
    :finished="finished"
  >
    <template #default="{ index, data }">
      <div class="item-content">
        <div>Row {{ index }}</div>
        <el-text v-html="data.text" />
      </div>
    </template>
  </el-virtual-list>
</template>

<script setup>
import { ref } from 'vue'

const textArray = [
  '你是自己故事的作者。<br>',
  '你的生活是你的作品。<br>',
  '挑战是成长的阶梯。<br>',
  '积极面对，挑战不难。<br>',
  '你的未来取决于你现在的选择。<br>',
]

const generateArray = () =>
  Array.from(Array.from({ length: 10 }).keys()).map((i) => ({
    text: textArray
      .slice(0, Math.ceil(Math.random() * textArray.length))
      .join(''),
  }))

const list = ref(generateArray())
const finished = ref(false)

const handleLoad = () => {
  console.log('load more')
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = Math.random() > 0.5
      if (success) {
        list.value.push(...generateArray())

        if (list.value.length >= 30) {
          finished.value = true
        }
      }

      return success ? resolve() : reject()
    }, 1000 * 1)
  })
}
</script>

<style lang="scss" scoped>
.item-content {
  box-sizing: border-box;
  padding: 6px 12px;
  margin: 8px;
  border-radius: 4px;
  border: 1px solid #e4e7ed;
  box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.12);
}

.text {
  text-align: center;
  margin: 6px;
}
</style>