原生js如何实现上拉加载下拉刷新？

米奇妙妙wuu

于 2023-01-05 21:14:58 发布

阅读量208

点赞数 1

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_60676278/article/details/128570441

版权

1.上拉加载

使用场景：

移动端历史日志、内容列表等模块中使用

简述：

当列表滑动到底部时，再做请求加载下一页列表，有利于减少http请求和浏览器渲染压力，提高页面首次加载速度

原理：

获取滑动内容外部盒子高度：document.querySelector(".container").clientHeight

获取整个内容的高度：document.querySelector(".ul").scrollHeight

获取卷曲出去的高度：let tops = document.querySelector(".container").scrollTop

外部盒子高度+卷曲出去的高度>=内容的高度 - 离底部距离高度（自定义）

监听滑动事件scroll 当满足以上条件时执行异步请求，这里需要加一个节流，当触发是禁止再次触发，等到异步事件加载完毕后，才允许再次上拉触发。

2.下拉刷新

简述：

向下滑动页面刷新数据

原理：

监听touchstart、touchmove、touchend三个事件

通过touchstart记录手指触摸时位置

通过touchmove记录向下滑动的距离，同时通过设置transform：translateY（x）来设置内容向下移动，控制滑动距离到达某个值时，禁止页面再做滑动

通过touchend记录手指离开事件，对滑动距离达到限定值时，做刷新请求数据处理，未到限定值时自动回弹translateY（0px）,并添加过渡动画

代码实现：

<!doctype html>
<html>
 
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport"
        content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
</head>
<style type="text/css">
    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }
 
    .container {
        width: 100vw;
        height: 100vh;
        overflow: scroll;
    }
 
    .ul li {
        width: 100%;
        height: 70px;
        line-height: 70px;
        border-bottom: 1px solid #000000;
        text-align: center;
    }
 
    .tip {
        width: 100%;
        text-align: center;
        height: 80px;
        line-height: 80px;
        position: absolute;
        top: 0;
        left: 0;
    }
</style>
 
<body>
    <div class="container">
        <p class="p"></p>
        <ul class="ul"> </ul>
    </div>
</body>
<script type="text/javascript">        init()
    function init() {
        for (let i = 1; i <= 10; i++) {
            var bd = document.createElement("li");
            bd.innerHTML = i
            document.querySelector(".ul").appendChild(bd)
        }
    }                //上拉加载        
    let hook = true
    document.querySelector(".container").addEventListener("scroll",
        function () {
            let Height = document.querySelector(".container").clientHeight
            let height = document.querySelector(".ul").scrollHeight
            let tops = document.querySelector(".container").scrollTop
            if (Height + tops >= height - 50 && hook) {
                hook = false
                console.log("添加数据")
                for (let i = 1; i <= 10; i++) {
                    var bd = document.createElement("li");
                    bd.innerHTML = i
                    document.querySelector(".ul").appendChild(bd)
                } hook = true
            }
        })                        //下拉刷新        
    var stratX = null
    var endX = null
    document.querySelector(".container").addEventListener("touchstart", function (e) {
        if (this.scrollTop == 0) {
            stratX = e.touches[0].clientY
        }
    })
    document.querySelector(".container").addEventListener("touchmove", function (e) {
        if (this.scrollTop == 0) {
            endX = e.touches[0].clientY - stratX
            if (endX < 100) { document.querySelector(".ul").style.transition = 'transform 0s ease'; document.querySelector(".ul").style.transform = 'translateY(' + endX + 'px)' }
        }
    })
    document.querySelector(".container").addEventListener("touchend", function () {
        if (endX < 100) {
            document.querySelector(".ul").style.transition = 'transform 0.5s ease'; document.querySelector(".ul").style.transform = 'translateY(0px)'
            return false
        } document.querySelector(".p").innerHTML = "加载中..."; document.querySelector(".p").classList.add("tip")
        setTimeout(() => {
            while (document.querySelector(".ul").hasChildNodes()) { document.querySelector(".ul").removeChild(document.querySelector(".ul").firstChild); }
            init()
            document.querySelector(".ul").style.transition = 'transform 0.5s ease'; document.querySelector(".ul").style.transform = 'translateY(0px)'
            document.querySelector(".p").innerHTML = ""; document.querySelector(".p").classList.remove("tip")
        }, 2000)
    })    
</script>
 
</html>

米奇妙妙wuu

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生js如何实现上拉加载下拉刷新？

通过touchmove记录向下滑动的距离，同时通过设置transform：translateY（x）来设置内容向下移动，控制滑动距离到达某个值时，禁止页面再做滑动。通过touchend记录手指离开事件，对滑动距离达到限定值时，做刷新请求数据处理，未到限定值时自动回弹translateY（0px）,并添加过渡动画。监听滑动事件scroll 当满足以上条件时执行异步请求，这里需要加一个节流，当触发是禁止再次触发，等到异步事件加载完毕后，才允许再次上拉触发。移动端历史日志、内容列表等模块中使用。
复制链接

扫一扫