滚动加载组件

最新推荐文章于 2024-08-21 14:09:37 发布

Pluto_fan

最新推荐文章于 2024-08-21 14:09:37 发布

阅读量64

点赞数 1

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/Pluto_fxy/article/details/132708160

版权

<template>
  <div class="list-show" id="scroll" :style="{ height: props.height }">
    <slot></slot>
  </div>
</template>
<script setup>
import { onMounted, ref, onBeforeUnmount, nextTick } from 'vue';
const emit = defineEmits(['onEarth']);

const props = defineProps({
  height: {
    type: String,
    default: '200px',
  },
  offset: {
    type: Number,
    default: -3,
  },
});
const isReachButtom = ref(false);

onMounted(() => {
  let dom = document.querySelector('.list-show');
  dom.addEventListener('scroll', () => autocycle(dom));
});

const autocycle = (dom) => {
  let scrollTop = dom.scrollTop;
  let scrollHeight = dom.scrollHeight;
  let offsetHeight = Math.ceil(dom.getBoundingClientRect().height);
  let currentHeight = scrollTop + offsetHeight;
  if (currentHeight < scrollHeight && isReachButtom.value) {
    isReachButtom.value = false;
  }
  if (isReachButtom.value) {
    return;
  }
  if (currentHeight >= scrollHeight + props.offset) {
    isReachButtom.value = true;
    //可视高度+滚动高度 + 距离底部的触发距离>=实际高度
    console.log("触底");
    emit('onEarth');
  }
};
</script>
<style lang="scss" scoped>
.list-show {
  box-sizing: border-box;
  overflow: auto;
  word-wrap: break-word;
  margin: 0 0;
  white-space: pre-line;
}
</style>