scroll-com-list v1.0.20

基于vue3+ts+vite的插件,版本不能低于vue3.3

示例

<!-- 
注意事项：
dataList：列表数据(必填)
num: 表示展示几行(必填)
time: 滚动的时间间隔,单位：毫秒(必填)

ScrollComList组件外层父元素必须设置高度,子元素是根据这个高度来计算的
 -->
<template>
  <div class="wrap">
    <ScrollComList 
      :dataList="dataList" 
      :num="4"
      :time="2000"
    >
      <template #content="{ conHeight, data }">
        <div class="src-li" :style="{ height: conHeight }" v-for="item in data" :key="item.id">{{ item.name }}
        </div>
      </template>
    </ScrollComList>
  </div>
</template>

<script lang='ts' setup>
// 也可以在main.ts中定义全局组件
import ScrollComList  from "scroll-com-list";
interface P {
  id: number
  name: string
}

const dataList = ref<P[]>([])

setTimeout(() => {
  dataList.value = [
    { id: 0, name: '555555' },
    { id: 1, name: '2222' },
    { id: 2, name: '333' },
    { id: 3, name: '444' },
    { id: 4, name: '555' },
    { id: 5, name: '项目1' },
    { id: 6, name: '项目2' }
  ]
}, 1000);
</script>
<style>
.wrap {
  width: 500px;
  height: 30vh;
  background: rgb(232, 232, 241);
}

.src-li {
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: 1px solid #aaa;
  box-sizing: border-box;
  font-size: 13px;
}
</style>