vue 自制列表，循环滚动

需求人员表示，超过高度的表格内容需要滚动展示，所以效果图如下：

自定义列表样式，主要是通过flex布局，控制 类th 与 类td 的宽度保持一致，标签结构还是参考了table的结构，由thead与tbody包裹tr再包裹最小单元th,td，但是自定义的列表在样式修改、结构调整上会更加灵活。

.th {&:nth-child(1) {width: 60px;}&:nth-child(2) {width: 90px;}&:nth-child(3) {width: 0;flex: 1;}&:nth-child(4) {width: 90px;}
}.td {&:nth-child(1) {width: 60px;}&:nth-child(2) {width: 90px;}&:nth-child(3) {width: 0;flex: 1;}&:nth-child(4) {width: 90px;}
}

this.stopAutoScroll() 与 this.startAutoScroll() 都是AI生成的JS代码修改而来

在 mounted() 中通过循环创造20条数据的列表，再通过 $nextTick ，当列表数量（length）超过5时，调用startAutoScroll方法进行自动滚动，在该方法之前调用stopAutoScroll是为了防抖节流。如果有主要思路想法，可以借助通义千问等AI工具进行JS代码的快速生成，节约时间。

mounted() {for (let i = 0; i < 20; i++) {let obj = {id: 'tableData00' + i,td1: i + 1,td2: 'td2',td3: i % 3 == 0 ? '测试测试测试' : i % 3 == 1 ? '测试测试' : '测试',td4: '99'}this.tableData.push(obj)}this.$nextTick(function () {// 当列表超过5条，自动滚动，可自行修改if (this.tableData.length > 5) {// 自动滚动this.stopAutoScroll();this.startAutoScroll();}})
},

【完整代码】

<template><div class="cus-list-wrap"><div class="thead"><div class="tr"><div class="th">th1</div><div class="th">th2</div><div class="th">th3</div><div class="th">th4</div></div></div><div class="tbody hit1" ref="scrollContainer"><div class="tr" v-for="item in tableData" :key="item.id"><div class="td">{{ item.td1 }}</div><div class="td">{{ item.td2 }}</div><div class="td">{{ item.td3 }}</div><div class="td">{{ item.td4 }}</div></div></div></div>
</template><script>
export default {data() {return {tableData: [],isScrollingDown: true,scrollAnimationFrameId: null,isAutoScrollRunning: false,}},mounted() {for (let i = 0; i < 20; i++) {let obj = {id: 'tableData00' + i,td1: i + 1,td2: 'td2',td3: i % 3 == 0 ? '测试测试测试' : i % 3 == 1 ? '测试测试' : '测试',td4: '99'}this.tableData.push(obj)}this.$nextTick(function () {// 当列表超过5条，自动滚动，可自行修改if (this.tableData.length > 5) {// 自动滚动this.stopAutoScroll();this.startAutoScroll();}})},methods: {// 自动滚动startAutoScroll() {if (this.isAutoScrollRunning) return;this.isAutoScrollRunning = true;const scrollContainer = this.$refs.scrollContainer;let scrollSpeed = 1; // 控制滚动速度const autoScroll = () => {if (!this.isAutoScrollRunning) return;if (this.isScrollingDown) {scrollContainer.scrollTop += scrollSpeed;if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {// 到达底部后切换方向，并设置一个小延时模拟“回到顶部”this.isScrollingDown = false;scrollContainer.scrollTop = 0;setTimeout(() => {this.isScrollingDown = true;}, 300); // 延迟时间可以根据需要调整}} else {scrollContainer.scrollTop -= scrollSpeed;if (scrollContainer.scrollTop <= 0) {this.isScrollingDown = true;}}this.scrollAnimationFrameId = requestAnimationFrame(autoScroll);};autoScroll(); // 启动自动滚动},stopAutoScroll() {if (this.scrollAnimationFrameId !== null) {cancelAnimationFrame(this.scrollAnimationFrameId);this.isAutoScrollRunning = false;}},},beforeDestroy() {// 清除定时器以避免内存泄漏this.stopAutoScroll();},
}
</script><style lang="less" scoped>
.cus-list-wrap {margin: 0 16px;padding-top: 4px;
}.hit1 {overflow-x: hidden;overflow-y: auto;height: 400px;
}.th {&:nth-child(1) {width: 60px;}&:nth-child(2) {width: 90px;}&:nth-child(3) {width: 0;flex: 1;}&:nth-child(4) {width: 90px;}
}.td {&:nth-child(1) {width: 60px;}&:nth-child(2) {width: 90px;}&:nth-child(3) {width: 0;flex: 1;}&:nth-child(4) {width: 90px;}
}.thead {.tr {display: flex;align-items: center;height: 30px;}.th {text-align: center;font-size: 14px;color: #666;}
}.tbody {.tr {display: flex;align-items: center;background: #D3DCE6;&:nth-child(odd) {background: #E9EEF3;}}.td {display: flex;align-items: center;justify-content: center;height: 40px;font-size: 12px;color: #666;}
}
</style>