后端一次给你10万条数据，如何显示？

_小小怪_
已于 2022-08-06 14:56:08 修改
阅读量328
点赞数
文章标签：前端 javascript html
于 2022-08-06 14:42:49 首次发布
本文链接：https://blog.csdn.net/qq_54281798/article/details/126194539
版权
懒加载

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        .container {
            width: 320px;
            height: 600px;
            overflow-y: auto;
            margin: 20px auto 0;
            border: 1px solid #000;
        }

        .item {
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="list"></div>
        <div class="bottom">底部</div>
    </div>
    <script>
        /* 获取 DOM 元素 */
        const list = document.querySelector('.list')
        const bottom = document.querySelector('.bottom')
        const container = document.querySelector('.container')
        const dataDemo = [{
                shopTitle: 'veromoda官方旗舰店'
            },
            {
                shopTitle: 'PINKMOONXXR'
            },
            {
                shopTitle: '王小鸭旗舰店'
            },
            {
                shopTitle: 'kbne服饰旗舰店'
            },
            {
                shopTitle: '三彩官方旗舰店'
            },
            {
                shopTitle: 'kbne服饰旗舰店'
            },
            {
                shopTitle: '玖姿官方outlets店'
            },
            {
                shopTitle: '珂美多旗舰店'
            },
            {
                shopTitle: '妃娜美旗舰店'
            },
            {
                shopTitle: 'themslan旗舰店'
            },
            {
                shopTitle: '王小鸭旗舰店'
            },
            {
                shopTitle: '玖诗娅旗舰店'
            },
            {
                shopTitle: '欧黎蔓旗舰店'
            },
            {
                shopTitle: '歌淑蔓服饰旗舰店'
            },
            {
                shopTitle: '欧赛雅文旗舰店'
            },
            {
                shopTitle: '噎欧旗舰店'
            },
            {
                shopTitle: '歌淑蔓服饰旗舰店'
            },
            {
                shopTitle: '李红国际旗舰店'
            },
            {
                shopTitle: '梵丽登旗舰店'
            },
            {
                shopTitle: '名典圣王旗舰店'
            },
            {
                shopTitle: '芭奢蒂旗舰店'
            },
            {
                shopTitle: '臻微旗舰店'
            },
            {
                shopTitle: '朗姿官方旗舰店'
            },
            {
                shopTitle: '臻微旗舰店'
            },
            {
                shopTitle: '玖姿官方旗舰店'
            },
            {
                shopTitle: '名典圣王旗舰店'
            },
            {
                shopTitle: 'kamilan卡米兰旗舰店'
            },
            {
                shopTitle: '伊纯路旗舰店'
            },
            {
                shopTitle: '韩小暖工厂店'
            },
            {
                shopTitle: '韩纤蝶旗舰店'
            },
            {
                shopTitle: '三五年丨缄默时光'
            },
            {
                shopTitle: '玖姿官方outlets店'
            },
            {
                shopTitle: '欧黎蔓旗舰店'
            },
            {
                shopTitle: '简伊妃旗舰店'
            },
            {
                shopTitle: 'Mapping香港专柜正品女装'
            },
            {
                shopTitle: '野典旗舰店'
            },
            {
                shopTitle: 'LLS家欧美街头风'
            },
            {
                shopTitle: '妃娜美旗舰店'
            },
            {
                shopTitle: '花爱慕旗舰店'
            },
            {
                shopTitle: 'annally旗舰店'
            },
            {
                shopTitle: '姐妹5折代购'
            },
            {
                shopTitle: '李红国际旗舰店'
            },
            {
                shopTitle: '芭奢蒂旗舰店'
            },
            {
                shopTitle: '乱在江南'
            },
            {
                shopTitle: '百洛安旗舰店'
            },
            {
                shopTitle: '樱花妤旗舰店'
            },
            {
                shopTitle: '韩纤蝶旗舰店'
            },
            {
                shopTitle: '靓点职装'
            },
            {
                shopTitle: 'mzgg木子格格旗舰店'
            },
            {
                shopTitle: '戈萨妮亚旗舰店'
            },
            {
                shopTitle: '梵丽登旗舰店'
            },
            {
                shopTitle: '璀家 cuijia'
            },
            {
                shopTitle: '念江南 棉麻布衣'
            },
            {
                shopTitle: '姐妹5折代购'
            },
            {
                shopTitle: 'Mapping香港欧货大牌女装'
            },
            {
                shopTitle: '小狐狸WITTY FOX'
            },
            {
                shopTitle: '念江南 棉麻布衣'
            },
            {
                shopTitle: '慕兔旗舰店'
            },
        ];
        const cClientHeight = container.clientHeight // 获取容器的高度
        const limit = cClientHeight / 40 // 一页显示的条数
        const maxPage = dataDemo.length / limit // 最大的页数
        let showList = [] // 渲染列表
        let page = 1 // 当前页数
        const goodList = [] // 用于收集将数据加工成DOM元素的数组


        /* 滚动事件 */
        container.addEventListener('scroll', function () {
            if (isClient()) {
                page++
                renderList()

            }
        })

        /* 将数据加工成DOM元素 */
        dataDemo.forEach(el => {
            const div = document.createElement('div')
            div.className = 'item'
            div.innerHTML = el.shopTitle
            goodList.push(div)
        });


        // 判断是否进入可视区
        function isClient() {
            const cScrollTop = container.scrollTop
            const bOffsetTop = bottom.offsetTop
            const flag = bOffsetTop - cScrollTop <= cClientHeight + 21
            // list.hasChildNodes() 判断 list 元素中是否含有子元素
            return !list.hasChildNodes() || flag
        }


        /* 将创建的DOM元素追加到 list中 */
        function renderList() {
            if (isClient()) {
                showList = goodList.slice(0, page * limit)
                showList.forEach(el => {
                    list.appendChild(el)
                })
            }
        }

        renderList()
    </script>
</body>

</html>