列表滚动和动态切换
一、列表滚动
再做大屏展示开发时，根据业务需求表格列表数据过多时需要缓慢滚动；为此简单封装了一个列表滚动方法，再遇到相同需求便可直接使用。方法中设置了默认参数，可以选择性传递参数来更改滚动的属性。
备注：包裹表格的直接父元素必须要设置高度同时在设置溢出隐藏属性（overflow: hidden）
/**
* @description 表格滚动方法封装
* @param id 滚动表格的id名（必须是唯一值，默认值table）
* @param setp 每次向上滚动距离长度（默认值2）
* @param time 每次移动的时间间隔（默认值100，单位毫秒）
* @mark 包裹表格的标签元素必须要设置高度并且设置overflow: hidden
*/
function tableScrollRender(id = 'table', setp = 2, time = 100) {
// 获取需要滚动的表格元素
var $tableDom = $(`#${
id}`);
// 定时器id
var timerId = null;
// 向上偏移长度
var translateY = 0;
// 没有找到表格元素/表格主体内容高度过小取消滚动
if(!$tableDom.length || $tableDom.outerHeight() < $tableDom.parent().outerHeight()) {
return;
};
// 获取表格内容主体
var tBody = $(`#${
id} tbody`);
// 获取表格主体高度
var offsetHeight = tBody.outerHeight();
// 固定表头
var thead = $(`#${
id} thead`);
if(thead.length) {
thead.css({
position: 'relative',
zIndex: 99,
});
}
// 滚动函数
function srcollFn() {
clearTimeout(timerId);
translateY += setp;
if(translateY >= offsetHeight) {
translateY = 0;
}
// 设置列表数据向上偏移
tBody.css({
'transform': `translateY(-${
translateY }px)`,
});
timerId = setTimeout(srcollFn, time);
};
timerId = setTimeout(srcollFn, time);
// hover时停止滚动
$(`#${
id}`).find('tbody').hover(function() {
clearTimeout(timerId);
}, function() {
timerId = setTimeout(srcollFn, time);
})
}
二、列表切换
列表切换也分为不同情况，根据业务需求可能是普通数据替换、增加切换效果的替换；
2.1 普通数据切换
/**
* @description 表格切换方法封装
* @param id 滚动表格的id名（必须是唯一值，默认值table）
* @param dataList 列表总数据（必输）
* @param time 每次移动的时间间隔（默认值100，单位毫秒）
* @param showLen 展示长度（默认值10）
*/
function tableSwitchover(id = 'table', dataList, time = 2000, showLen = 10 ) {
var tableIndex = 0;
var timerId = null;
// 初始化执行一次
switchover();
clearInterval(timerId);
timerId = setInterval(switchover, time);
// 切换函数
function switchover() {
// 初次渲染表格数据
const list = dataList.slice(tableIndex * showLen, tableIndex * showLen + showLen);
// 数据全部展示完
if(!list.length) {
tableIndex = 0;
switchover();
return;
};
// 表格渲染方法
tableInit(list);
tableIndex++;
}
}
2.2 增加切换效果
/**
* @description 表格切换方法封装
* @param id 滚动表格的id名（必须是唯一值，默认值table）
* @param dataList 列表总数据（必输）
* @param time 每次移动的时间间隔（默认值100，单位毫秒）
* @param showLen 展示长度（默认值10）
* @param type 移动方向默认向上
* @mark 渲染表格数据时需要那span标签包裹
*/
function tableDynamicSwitch(id = 'table', dataList, time = 4000, showLen = 10, type = 'top') {
var tableIndex = 0;
var timerId = null;
var timerOutId = null;
var transformCss = '';
switch (type){
case 'right':
transformCss = 'translateX(150%)';
break;
case 'bottom':
transformCss = 'translateY(150%)';
break;
case 'left':
transformCss = 'translateX(-150%)';
break;
default:
transformCss = 'translateY(-150%)';
break;
}
// 初始化执行一次
switchover();
clearInterval(timerId);
timerId = setInterval(function () {
// 设置切换效果css
$(`#${
id}`).find('span').parent().css({
overflow: 'hidden'
});
$(`#${
id}`).find('span').css({
display: 'block',
transition: '1s',
transform: transformCss
});
// 切换时长
clearTimeout(timerOutId);
timerOutId = setTimeout(function () {
$(`#${
id}`).find('span').css({
transform: 'none'
});
switchover();
}, 1000);
}, time);
// 切换函数
function switchover() {
// 初次渲染表格数据
const list = dataList.slice(tableIndex * showLen, tableIndex * showLen + showLen);
// 数据全部展示完
if(!list.length) {
tableIndex = 0;
switchover();
return;
};
// 表格渲染方法
tableInit(list);
tableIndex++;
}
};
// 表格渲染
function tableRenderer(item) {
return `
<tr data-id=${
item.userId}>
<div class="table-class">
<td><span>${
item.userId}</span></td>
<td><span>${
item.name}</span></td>
<td><span>${
item.sex}</span></td>
<td><span>${
item.age}</span></td>
<td><span>${
item.phone}</span></td>
</div>
<td>
<button class="edit" onClick="edit(this)">编辑</button>
<button class="error" onClick="del(this)">删除</button>
</td>
</tr>
`;
}