首页 > web前端 > js教程 > 正文

原生js下拉刷新、上拉加载效果实现(附代码)

云罗郡主
发布: 2018-10-11 15:35:57
转载
5386人浏览过

本篇文章给大家带来的内容是关于原生js下拉刷新、上拉加载效果实现(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

微信截图_20181011153652.png

在控制台切换到移动端就可以看效果了

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .header {
            position: fixed;
            left: 0;
            top: 0;
            width: 100%;
            height: 60px;
            background: pink;
            line-height: 60px;
            text-align: center;
            color: white;
        }
        .content {
            width: 200px;
            height: 1000px;
            border: 2px solid green;
            background: linear-gradient(#fff, #000);
            -webkit-flex-shrink: 0;
            flex-shrink: 0;
            margin: 60px auto 0;
        }
        img {
            width: 100%;
            height: 180px;
            position: absolute;
            top: 60px;
            left: 0;
            display: none;
            z-index: -1
        }
        p{
            line-height: 30px;
            text-align: center;
            display: none
        }
    </style>
</head>
<body>
    <div>
        <div>首页</div>
        @@##@@
        <div></div>
        <p>加载中...</p>
    </div>
    <script>
        var oImg = document.getElementsByTagName('img')[0];
        var oP=document.getElementsByTagName('p')[0];
        var oHeader = document.getElementsByClassName('header')[0];
        var oContent = document.getElementsByClassName('content')[0];
        var screenH = document.documentElement.clientHeight || document.body.clientHeight;
        var startY,
            moveY;
        oContent.addEventListener('touchstart', (e) => {
            startY = e.touches[0].pageY;
        })
        oContent.addEventListener('touchmove', (e) => {
            moveY = e.touches[0].pageY - startY;
        });
        oContent.addEventListener('touchend', () => {
            if (moveY > 0) {//下拉
                oImg.style.display = 'block';
                if (moveY > 180) moveY = 180;
                oContent.style.marginTop = moveY + oHeader.clientHeight + 'px';
                //刷新数据后再走下面的
                var timer = setInterval(() => {
                    moveY -= 1;
                    if (moveY <= 0) {
                        oImg.style.display = 'none';
                        clearInterval(timer);
                        moveY = 0
                    }
                    oContent.style.marginTop = moveY + oHeader.clientHeight + 'px';
                }, 4)
            } else {//上拉
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                if (scrollTop + screenH + 20 >= oContent.scrollHeight) {
                    oP.style.display='block'
                    //加载下条数据
                    setTimeout(() => {
                        oP.style.display='none'
                        oContent.style.height = oContent.clientHeight + 300 + 'px'
                    }, 500)
                }
            }
        })
    </script>
</body>
</html>
登录后复制

以上就是对原生js下拉刷新、上拉加载效果实现(附代码)的全部介绍,如果您想了解更多有关JavaScript视频教程,请关注PHP中文网。

原生js下拉刷新、上拉加载效果实现(附代码)

以上就是原生js下拉刷新、上拉加载效果实现(附代码)的详细内容,更多请关注php中文网其它相关文章!

最佳 Windows 性能的顶级免费优化软件
最佳 Windows 性能的顶级免费优化软件

每个人都需要一台速度更快、更稳定的 PC。随着时间的推移,垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是,许多工具可以让 Windows 保持平稳运行。

下载
相关标签:
来源:qdfuns网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
开源免费商场系统广告
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号