有没有一种插件或者table的方法形成一个这样的操作
我有一个这样的table表格
让表头不动,剩下的数据进行循环滚动,
然后所有数据在黄色方框内展示,
红色方框的数据是排队数据,然后进行循环滚动,
滚到最上面然后回到最下面,在进行重复滚动
原生的话可以自己写一个方法:列表的无限滚动。
用的组件的话建议看看有无相关配置项(目前我只知道TDesign有提供虚拟滚动的表格配置)。
vue项目不介意引入其他组件库可以使用DataV的轮播表(只限于不进行表操作的表格数据)。
其他插件的话了解不多,等有缘人给你解答吧。
思路供参考,可用的话细节自己调吧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.table-scroll {
width: 300px;
overflow-y: hidden;
}
.table-scroll table {
border: 1px solid #eee;
}
.table-scroll table td,
.table-scroll table th {
border-right: 1px solid #eee;
border-bottom: 1px solid #eee;
}
.table-tb {
height: 120px;
overflow: auto;
display: inline-block;
}
table td {
height: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="table-scroll">
<table class="table-th">
<!-- 设置列宽,两个表格要同步 -->
<colgroup>
<col name="A" width="150">
<col name="B" width="120">
</colgroup>
<thead>
<th>数据A</th>
<th>数据B</th>
</thead>
</table>
<table class="table-tb" id="s-tb">
<!-- 设置列宽,两个表格要同步 -->
<colgroup>
<col name="A" width="150">
<col name="B" width="120">
</colgroup>
<tbody>
<tr><td>数据a1</td><td>数据a2</td></tr>
<tr><td>数据b1</td><td>数据b2</td></tr>
<tr><td>数据c1</td><td>数据c2</td></tr>
<tr><td>数据d1</td><td>数据d2</td></tr>
<tr><td>数据e1</td><td>数据e2</td></tr>
<tr><td>数据f1</td><td>数据f2</td></tr>
<tr><td>数据h1</td><td>数据h2</td></tr>
<tr><td>数据i1</td><td>数据i2</td></tr>
</tbody>
</table>
</div>
</body>
<script>
var tbDom = document.getElementById('s-tb')
// 获取可滚动距离
var canScrollDis = tbDom.scrollHeight - tbDom.offsetHeight
if (canScrollDis) {
Scroll_Top(tbDom)
}
function Scroll_Top (el) {
// 最小每次移动0.5
let rate = 0.5
// 创建时间函数,执行滚动事件
let scrollMove = setInterval(() => {
// 滚动到底部的时候,重置滚动
if (canScrollDis - el.scrollTop < 0) {
el.scrollTop = 0
} else {
// 按照每次滚动距离设置元素,添加滚动值,使列表滚动
el.scrollTop += rate
}
// 肉眼觉得流畅,最佳设置16ms
}, 16)
}
</script>
</html>