阅读量:0
实现效果如图所示，可以调整滚动的快慢，可以实现内容高度不够的时候停止滚动的效果。
1.实现原理：
创建一个dom为ul，赋值为当前列表数据，然后拷贝这个dom赋值给第二个ul，然后判断屏幕高度跟滚动高度对比，利用requestAnimationFrame动画实现滚动
2.注意事项：
这是基于react的滚动列表改造过来的，所以本身留了render口子，可以自定义表内的内容，不只是文字，但是对于vue3跟jsx的结合，我还是不是很熟，所以目前还没有用到render写法
3.对比：
最开始实现我是想用vue3-seamless-scroll这个插件的，但是使用起来发现，首先它不支持数据少的情况下自动停止滚动，需要传入step为0，感觉不是很方便（也可能是我没有很会用这个插件），所以感觉直接写了一个。
组件代码：
<template> <div class="scrollContainer" :key="currentTime" :style="{ height: `${height}px` }" > <div class="scrollHead" :style="{ height: headerHeight + 'px', }" > <div v-for="l in columns" :key="l.key" :style="{ width: `${l.width}px` }" > {{ l.title }} </div> </div> <ul class="scrollBody" ref="wrapperDom" :style="{ height: `${height - headerHeight}px` }" > <ul ref="childDom1" @mouseenter="handleEnter" @mouseleave="handleLeave" > <li v-for="(l, i) in dataSource" :data-key="rowKey ? l[rowKey] : `list${i}`" :key="rowKey ? l[rowKey] : `list${i}`" :style="{ height: `${rowHeight}px` }" > <div v-for="(p, c) in columns" :key="`p${c}`" :style="getStyle(p, l)" @click=" (e) => { e.stopPropagation() onCellClick(l, p) onRowClick?.(l) } " > {{ p?.render?.(i, l, l[p.key]) || l[p.key] }} </div> </li> </ul> <ul ref="childDom2"></ul> </ul> </div> </template> <script setup lang="ts"> import { onMounted, watch, ref, onBeforeUnmount, computed, nextTick } from 'vue' interface ViewProps { height: number dataSource: Record<string, any>[] columns: TableColumn[] headerHeight?: number rowHeight?: number onRowClick?: (l: Record<string, any>) => void rowKey?: string scroll?: boolean } export interface TableColumn { key: string title: string width: number render?: (index: number, data: Record<string, any>, text: any) => any onClick?: (data: Record<string, any>) => void } const props = defineProps<ViewProps>() const { height, columns, rowHeight = 27.5, headerHeight = 36, rowKey } = props const wrapperDom = ref<any>() const childDom1 = ref<any>() const childDom2 = ref<any>() const currentTime = ref(new Date().getTime()) let count = 0 let reqAnimation: number onMounted(() => { nextTick(() => { reqAnimation = window.requestAnimationFrame(taskStart) }) }) onBeforeUnmount(() => { handleEnter() }) const dataSource = computed(() => { console.log('dataSource', dataSource) return props.dataSource }) watch( () => props.dataSource, () => { currentTime.value = new Date().getTime() } ) const getStyle = (p, l) => { let pStyle = { width: `${p.width}px` } if (l.lineColor) { pStyle['color'] = l.lineColor } return pStyle } var startTime = null, stepInMs = 100, drawCount = 0 const taskStart = (timestamp: any) => { var progress if (startTime === null) { startTime = timestamp } progress = timestamp - startTime! if (progress > stepInMs) { startTime = timestamp if ( childDom1.value?.clientHeight >= wrapperDom.value?.clientHeight && childDom2.value?.clientHeight < 10 ) { childDom2.value.innerHTML = childDom1.value.innerHTML } if (wrapperDom.value?.scrollTop >= childDom1.value?.scrollHeight) { wrapperDom.value.scrollTop = 0 count = 0 } else { count += 1 wrapperDom.value.scrollTop = count } } if (props.scroll) { reqAnimation = window.requestAnimationFrame(taskStart) } } const handleEnter = () => { window.cancelAnimationFrame(reqAnimation) } const handleLeave = () => { reqAnimation = window.requestAnimationFrame(taskStart) } const onCellClick = (l: Record<string, any>, p: TableColumn) => { p?.onClick?.(l) } </script> <style lang="scss" scoped> .scrollContainer { width: 100%; div { text-align: center; display: inline-block; margin: 0; font-size: 14px; font-weight: normal; font-stretch: normal; letter-spacing: 0; opacity: 0.9; } .scrollHead { display: flex; align-items: center; background-color: rgba(33, 60, 93, 0.55); div { font-size: 14px; font-stretch: normal; letter-spacing: 0; font-family: MicrosoftYaHei, sans-serif; font-weight: bold; color: #ffffff; opacity: 0.47; } } .scrollBody { overflow-y: scroll; width: 100%; padding: 0; scrollbar-width: none; -ms-overflow-style: none; ul { height: auto; padding: 0; margin: 0; } li { list-style: none; position: relative; cursor: pointer; display: flex; height: 36px; color: #fff; align-items: center; } li div { line-height: 36px; color: #24acef; white-space: nowrap; /* 文本不换行 */ overflow: hidden; /* 溢出部分隐藏 */ text-overflow: ellipsis; /* 溢出部分用"..."代替 */ } li:hover { background: rgba(43, 143, 171, 0.52); > div { color: #fff; } } &::-webkit-scrollbar { display: none; } li:nth-child(even) { background-color: rgba(43, 143, 171, 0.13); } li:nth-child(even):hover { background: rgba(43, 143, 171, 0.52); color: #fff; } } } </style> 父组件调用：
<template> <div> <ScrollTable :height="300" :dataSource="dataSource" :columns="columns" :scroll="true" ></ScrollTable> </div> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' import ScrollTable from '../../components/ScrollTable.vue' const dataSource = [ { name: '张三', age: 18, gender: '男', address: '北京市', phone: '12345678901', }, { name: '李四', age: 20, gender: '女', address: '上海市', phone: '12345678902', }, { name: '王五', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '赵六', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '王思聪', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '王健林', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马云', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马化腾', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马1', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马2', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马3', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马4', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马5', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马6', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马7', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马8', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, { name: '马9', age: 22, gender: '男', address: '广州市', phone: '12345678903', }, ] const columns = [ { title: '姓名', dataIndex: 'name', width: 50, key: 'name', }, { title: '年龄', dataIndex: 'age', width: 50, key: 'age', }, { title: '性别', dataIndex: 'gender', width: 50, key: 'gender', }, { title: '地址', dataIndex: 'address', width: 50, key: 'address', }, { title: '电话', dataIndex: 'phone', width: 50, key: 'phone', }, ] </script> <style lang="scss" scoped></style> 