复制完，用vscode，Go-Live直接运行查看效果
可自行改造，比如类名、高度重写，增加入参等
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>虚拟滚动示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="./a.js"></script> <!-- 插件路径 -->
<style>
.item {
background-color: #f9f9f9;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div id="virtual-scroll-container"></div>
<script>
$(document).ready(function() {
var items = [];
for (var i = 1; i <= 100; i++) {
items.push({name:'Item ' + i, id: i});
}
console.log(items);
$('#virtual-scroll-container').virtualScroll({
itemHeight: 30, // 每个项目的高度
items: items, // 数据数组
visibleItems: 10, // 可见项目数量
onClickItem: (itemData) => {
console.log('111',itemData);
}
});
});
</script>
</body>
</html>
js
(function($) {
$.fn.virtualScroll = function(options) {
// 默认设置
var settings = $.extend({
itemHeight: 20, // 每个项的高度
items: [], // 列表数据
visibleItems: 10 // 可见项数量
}, options);
// 插件初始化
return this.each(function() {
var $container = $(this);
$container.css({
position: 'relative',
overflow: 'auto',
height: settings.itemHeight * settings.visibleItems
});
// 计算总高度
var totalHeight = settings.itemHeight * settings.items.length;
// 创建一个虚拟列表
var $viewport = $('<div class="viewport"></div>').css({
position: 'absolute',
height: totalHeight,
width: '100%',
top: 0
}).appendTo($container);
// 渲染可见的列表项
function renderItems(startIndex) {
// 清空视口内容
var $itemsContainer = $('<div class="items-container"></div>').css({
position: 'absolute',
top: startIndex * settings.itemHeight + 'px',
width: '100%'
});
var endIndex = Math.min(startIndex + settings.visibleItems, settings.items.length);
for (let i = startIndex; i < endIndex; i++) {
var $item = $('<div class="item"></div>').css({
height: settings.itemHeight,
}).text(settings.items[i].name);
$item.on('click', (e)=> {
console.log('index', i, settings.items[i]);
options.onClickItem(settings.items[i])
})
$itemsContainer.append($item);
}
// 添加项目容器到视口
$viewport.empty().append($itemsContainer);
}
// 滚动事件
$container.on('scroll', function() {
var scrollTop = $container.scrollTop();
var startIndex = Math.floor(scrollTop / settings.itemHeight);
renderItems(startIndex);
});
// 初始化渲染
renderItems(0);
});
};
}(jQuery));
网友评论