List 列表 ​

<template>
  <el-list
    class="list-load"
    :list="list"
    style="height: 500px"
    :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-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>

<template>
  <el-list
    ref="listRef"
    class="list-load"
    :list="list"
    style="height: 680px"
    :pre-load="handlePreLoad"
    :finished="finished"
    no-more-text="没有更多聊天内容啦"
  >
    <template #default="{ data }">
      <div class="item-content">
        <el-bubble
          :placement="data.placement"
          :content="data.content"
          :content-style="data.contentStyle"
          :avatar="{ style: data.avatar }"
        />
      </div>
    </template>
  </el-list>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'

const listRef = ref()

const generateArray = (len = 0) =>
  Array.from(Array.from({ length: 10 }).keys()).map((i) => {
    const index = len + i
    return {
      placement: index % 2 === 0 ? 'start' : 'end',
      content:
        index % 2 === 0
          ? `Row ${index} - ${`Good morning, how are you?`.repeat(
              Math.floor(Math.random() * 10)
            )}`
          : `Row ${index} - ${`Hi, good morning, I'm fine!`.repeat(
              Math.floor(Math.random() * 10)
            )}`,
      avatar:
        index % 2 === 0
          ? {
              color: '#f56a00',
              backgroundColor: '#fde3cf',
            }
          : {
              color: '#fff',
              backgroundColor: '#87d068',
            },
      contentStyle: { maxWidth: '500px' },
    }
  })

const list = ref([...generateArray().reverse()])

const finished = ref(false)

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

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

      return success ? resolve(list.value) : reject()
    }, 1000 * 1)
  })
}

onMounted(() => {
  listRef.value.scrollToBottom()
})
</script>

<style lang="scss" scoped>
.item-content {
  box-sizing: border-box;
  padding: 6px 12px;
  margin: 8px;
}

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

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