移动端中使用率较高的上拉刷新

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <script>
        //事件：当屏幕发生滚动的时候
        window.onscroll=function(){
            //距离页面顶部的滚动的距离
            var oScrollTop=document.documentElement.scrollTop || document.body.scrollTop;
            //屏幕的可视高度
            var oClientH=document.documentElement.clientHeight;
            //body的高度
            var oBodyH=document.body.scrollHeight || document.documentElement.scrollHeight;

            var disabled=false;
            /*disabled用于阻止滚动事件多次触发*/
            if(oBodyH - oClientH - oScrollTop <= 200){
                
                /*下拉刷新普通版*/
                if(disabled){
                    return false;
                }else{
                    disabled=true;
                    alert('刷新数据了哦');
                    disabled=false;
                }
                
                /*下拉刷新ajax版*/
                //如果你需要ajax调取接口，需要声明一个变量var disabled=true;
                /*ajax({
                    url:xxx,
                    data:{

                    },
                    success:function(res){
                        disabled=true;

                        //把新调取来的数据添加到你需要的数组中即可
                        
                        disabled=false;
                    }
                })*/
            }
        }
    </script>
</head>
<body>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
    <div>Is that the end?</div>
</body>
</html>
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容