基于vue3实现的列表无限滚动组件

<template> <div ref="scrollWrapper" class="scroll" style="height: 100%"> <div :class="{ 'list-item-wrapper': isShowScroll }" :style="{ animationDuration: carouselSpeed * InnerHeight + 's', }" > <div ref="scrollInner"> <div v-for="(item, index) in dataList" :key="index"> {{ item.name }} </div> </div> <div v-html="copyHtml"></div> </div> </div> </template> <script lang="ts" setup> import { nextTick, ref, watch } from "vue"; const props = defineProps({ carouselSpeed: { type: Number, default: 0.02, }, // 组件外部传进来的数据 progressData: { type: Object, default: () => [], }, }); const scrollInner = ref<any>(); const scrollWrapper = ref<any>(); const InnerHeight = ref(0); const scrollHeight = ref(0); const copyHtml = ref(""); const isShowScroll = ref(false); const dataList = ref<any>([]); watch( () => props.progressData, (val) => { dataList.value = val; nextTick(() => { InnerHeight.value = getStyleHeight(scrollInner.value); scrollHeight.value = getStyleHeight(scrollWrapper.value); isShowScroll.value = isNeedScroll(scrollHeight.value, InnerHeight.value); copyHtml.value = isShowScroll.value ? (scrollInner.value as unknown as any).innerHTML : ""; }); }, { deep: true, } ); const getStyleHeight = (el: any) => { return el.offsetHeight; }; const isNeedScroll = (height: any, children: any) => { const containerHeight = height; const childrenHeight = children; return childrenHeight > containerHeight; }; </script> <style scoped> .scroll { overflow: hidden; } .list-item-wrapper { -webkit-animation: move 10s linear infinite; animation: move 10s linear infinite; } .list-item-wrapper:hover { animation-play-state: paused; } @keyframes move { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } } </style>