el-scrollbar实现触底加载数据

触底加载一个demo,用到的时候根据自己的逻辑使用既可。

<template>
  <div class="main">
    <div class="top"></div>
    <div class="content">
      <div class="label"></div>
      <div class="list">
        <el-scrollbar ref="scroll" class="scrollBox" @scroll="handleScroll">
          <p v-for="item in total" :key="item" class="scrollbar-demo-item">
            {{ item }}
          </p>
        </el-scrollbar>
        <div v-if="loading" class="loading">Loading...</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const loading = ref(false);
const scroll = ref(null);
const total = ref(20);

const load = () => {
  loading.value = true;
  setTimeout(() => {
    loading.value = false;
    total.value += 20;
  }, 3000);
};
const handleScroll = (event) => {
  if (loading.value === true) {
    return;
  }
  // wrapRef.scrollHeight   内容总高度
  // wrapRef.clientHeight   可视区域高度
  // event.scrollTop      滚动条距盒子顶部高度

  const wrapRef = scroll.value.wrapRef;
  let poor = wrapRef.scrollHeight - wrapRef.clientHeight;
  // 判断滚动到底部
  if (event.scrollTop + 20 >= poor) {
    load();
  }
};
</script>

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值