List scrolling and dynamic switching
1. List scrolling
When doing large-screen display development, it needs to scroll slowly when there is too much table list data according to business requirements; for this reason, a list scrolling method is simply encapsulated, and it can be used directly when encountering the same requirements. Default parameters are set in the method, and parameters can be optionally passed to change the properties of scrolling.
Remarks: The direct parent element of the wrapping table must set the height and set the overflow hidden attribute (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. List switching
List switching is also divided into different situations. According to business needs, it may be ordinary data replacement or replacement with increased switching effect;
2.1 Normal data switching
/**
* @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 Add switching effect
/**
* @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>
`;
}