长连接-常见于移动端向下滑动加载更多(load more)

最新推荐文章于 2022-11-16 11:56:05 发布

吃瓜群众欢乐多

最新推荐文章于 2022-11-16 11:56:05 发布

阅读量562

点赞数

分类专栏： ES6/ES5

本文链接：https://blog.csdn.net/sinat_36146776/article/details/105542060

版权

ES6/ES5 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

移动端加载更多使用demo

长连接

MDN - IntersectionObserver：异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法
Document.createDocumentFragment()：常用于创建空白文档片段，然后将这个片段添加到dom结构中

demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        body {
            margin: 8px;
        }

        .container > li {
            font-size: 20vw;
            display: flex;
            justify-content: center;
            height: 100px;
            background: lightgray;
            margin: 8px;
            border: 1px solid hotpink;
            box-sizing: border-box;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="scrollerHeader" id="first-item">first</div>

    <ol class="container" id="container">
    </ol>
    <div class="scrollerFooter" id="last-item">加载更多</div>
</div>

</body>

<script>
    const firstId = 'first-item';
    const lastId = 'last-item';
    const listSize = 10;
    let firstIndex = 0;
    const container = document.getElementById("container");
    const list = document.querySelectorAll("#container li")
    const firstDom = document.getElementById("first-item")
    const lastDom = document.getElementById("last-item")


    let ob = new IntersectionObserver((entries) => {
        if (entries[0].intersectionRatio <= 0) return;
        entries.forEach(item => {
            if (item.target.id === firstId) {
                //向上滑动
                console.log("first id");
                scrollFun('up')
            } else if (item.target.id === lastId) {
                //向下滑动
                console.log("last id");
                scrollFun('down')
            }
        })
    })

    ob.observe(firstDom)
    ob.observe(lastDom)

    function scrollFun(direction) {
        if (direction === 'up') {
            //删除自身
            // container.parentNode.removeChild(container);
            // render();
        }
        if (direction === 'down') {
            render()
        }
    }

    function render() {
        let fragment = document.createDocumentFragment();
        for (let i = 0; i < listSize; i++) {
            let dom = document.createElement('li');
            dom.innerHTML = firstIndex + i;
            fragment.appendChild(dom);
        }
        firstIndex = firstIndex + listSize;
        container.appendChild(fragment)
    }
    render(firstIndex);
</script>
</html>

更多可查看链接：IntersectionObserver API 使用教程

吃瓜群众欢乐多

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
长连接-常见于移动端向下滑动加载更多(load more)

长连接MDN - IntersectionObserver：异步观察目标元素与其祖先元素或顶级文档视窗(viewport)交叉状态的方法Document.createDocumentFragment()：常用于创建空白文档片段，然后将这个片段添加到dom结构中<!DOCTYPE html><html lang="en"><head> &lt...
复制链接

扫一扫

专栏目录