el-infinite-scroll详解

el-infinite-scroll 是 Element Plus 框架中的一个无限滚动组件，用于在滚动到底部时自动加载更多内容。这个组件通常用于分页加载大量数据，提升用户体验。

一。el-infinite-scroll 属性详解

1. loading:

   • 类型: Boolean
   • 用途: 是否正在加载数据。
   • 默认值: false

2. distance:

   • 类型: Number
   • 用途: 触发加载的距离，单位为像素。
   • 默认值: 0

3. immediate-check:

   • 类型: Boolean
   • 用途: 是否在初始化时立即检查滚动位置。
   • 默认值: true

4. on-top-reached:

   • 类型: Function
   • 用途: 滚动到顶部时触发的回调函数。

5. on-bottom-reached:

   • 类型: Function
   • 用途: 滚动到底部时触发的回调函数。

二。 el-infinite-scroll 事件详解

1. top-reached:

   • 类型: Function
   • 用途: 滚动到顶部时触发的事件。
   • 参数: —

2. bottom-reached:

   • 类型: Function
   • 用途: 滚动到底部时触发的事件。
   • 参数: —

三。示例代码

<template>
  <div>
    <h2>Infinite Scroll 示例</h2>

    <el-scrollbar style="height: 300px;">
      <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
        <li v-for="item in list" :key="item">{{ item }}</li>
      </ul>
    </el-scrollbar>

    <el-button @click="loadMore">手动加载更多</el-button>
  </div>
</template>

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

const list = ref([])
const loading = ref(false)
const count = ref(0)

const load = () => {
  loading.value = true
  setTimeout(() => {
    for (let i = 0; i < 20; i++) {
      list.value.push(++count.value)
    }
    loading.value = false
  }, 2000)
}

const loadMore = () => {
  load()
}

onMounted(() => {
  load()
})
</script>

四。 代码解释

1. HTML 结构:

   • 使用 el-scrollbar 包裹一个列表，列表使用 v-infinite-scroll 指令监听滚动事件。

   • <el-scrollbar style="height: 300px;">
       <ul class="infinite-list" v-infinite-scroll="load" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
         <li v-for="item in list" :key="item">{{ item }}</li>
       </ul>
     </el-scrollbar>
     

2. JavaScript 逻辑:

   • 定义 list 数组存储数据，loading 标记是否正在加载数据，count 记录当前数据的数量。
   • load 方法模拟异步加载数据，每次加载 20 条数据。
   • loadMore 方法用于手动触发加载更多数据。
   • onMounted 钩子在组件挂载后立即调用 load 方法加载初始数据。

   • import { ref, onMounted } from 'vue'
     
     const list = ref([])
     const loading = ref(false)
     const count = ref(0)
     
     const load = () => {
       loading.value = true
       setTimeout(() => {
         for (let i = 0; i < 20; i++) {
           list.value.push(++count.value)
         }
         loading.value = false
       }, 2000)
     }
     
     const loadMore = () => {
       load()
     }
     
     onMounted(() => {
       load()
     })