復制完，用vscode，Go-Live直接運行查看效果
可自行改造，比如類名、高度重寫，增加入?yún)⒌?br>
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, // 數(shù)據(jù)數(shù)組
visibleItems: 10, // 可見項目數(shù)量
onClickItem: (itemData) => {
console.log('111',itemData);
}
});
});
</script>
</body>
</html>
js
(function($) {
$.fn.virtualScroll = function(options) {
// 默認設置
var settings = $.extend({
itemHeight: 20, // 每個項的高度
items: [], // 列表數(shù)據(jù)
visibleItems: 10 // 可見項數(shù)量
}, 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;
// 創(chuàng)建一個虛擬列表
var $viewport = $('<div class="viewport"></div>').css({
position: 'absolute',
height: totalHeight,
width: '100%',
top: 0
}).appendTo($container);
// 渲染可見的列表項
function renderItems(startIndex) {
// 清空視口內(nèi)容
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));
