jquery虛擬滾動插件

復制完,用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));

?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內(nèi)容