原生JS实现下拉刷新

最新推荐文章于 2024-05-15 09:26:37 发布

黑面狐 sa~

最新推荐文章于 2024-05-15 09:26:37 发布

阅读量1.6w

点赞数 5

分类专栏： javascript 前端文章标签： javascript

本文链接：https://blog.csdn.net/qq_21859119/article/details/78770577

版权

前端同时被 2 个专栏收录

60 篇文章 0 订阅

订阅专栏

javascript

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <title>Pull to Refresh</title>
    <meta name="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;" />
    <style>
        div{
            position: absolute;
            top:0px;
            bottom:0px;
            width:100%;
            left:0px;
            overflow: hidden;
        }
        li{
            list-style-type: none;
            height:35px;
            background: gainsboro;
            border-bottom: solid 1px #fff;
            text-align: left;
            line-height: 35px;
            padding-left:15px;
        }
        ul{
            width:100%;
            margin-top:0px;
            position: absolute;
            left:0px;
            padding:0px;
            top:0px;
        }
    </style>
</head>
<body>
<div class="outerScroller">
    <ul class = 'scroll'>
        <li>朋友圈1</li>
        <li>朋友圈2</li>
        <li>朋友圈3</li>
        <li>朋友圈4</li>
        <li>朋友圈5</li>
        <li>朋友圈6</li>
        <li>朋友圈7</li>
        <li>朋友圈8</li>
        <li>朋友圈9</li>
        <li>朋友圈10</li>
    </ul>
</div>
<script>
    var scroll = document.querySelector('.scroll');
    var outerScroller = document.querySelector('.outerScroller');
    var touchStart = 0;
    var touchDis = 0;
    outerScroller.addEventListener('touchstart', function(event) {
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        touchStart = touch.pageY;
        console.log(touchStart);
    }, false);
    outerScroller.addEventListener('touchmove', function(event) {
        var touch = event.targetTouches[0];
        console.log(touch.pageY + 'px');
        scroll.style.top = scroll.offsetTop + touch.pageY-touchStart + 'px';
        console.log(scroll.style.top);
        touchStart = touch.pageY;
        touchDis = touch.pageY-touchStart;
    }, false);
    outerScroller.addEventListener('touchend', function(event) {
        touchStart = 0;
        var top = scroll.offsetTop;
        console.log(top);
        if(top>70)refresh();
        if(top>0){
            var time = setInterval(function(){
                scroll.style.top = scroll.offsetTop -2+'px';
                if(scroll.offsetTop<=0)clearInterval(time);
            },1)
        }
    }, false);
    function refresh(){
	//这里是后台数据
        for(var i = 3;i>0;i--)
        {
            var node = document.createElement("li");
            node.innerHTML = "I'm new" + i;
            scroll.insertBefore(node,scroll.firstChild);
        }
    }
</script>
</body>
</html>

黑面狐 sa~

关注

5
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
原生JS实现下拉刷新

<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>Document</title> <title>Pull to Refresh</title> <meta name="viewport" content="width=device-width,height=device-
复制链接

扫一扫