移动端 上拉加载下拉刷新功能 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./loadmore.css">
    <title>laodmore</title>
</head>
<body>
<script src="./loadmore.js"></script>
<div id="loadmorefar">
    <div id="loadmore">
        <ul id="ul">
            <li>1</li>
            <li>1</li>
            <li>1</li>
            <li>1</li>
        </ul>
    </div>
</div>
</body>
<script>

        loadmore({
            pull:function (value) {
                console.log(value)
            },
            push:function (value) {
                console.log(value)
            }
        })

</script>
</html>




#loadmore{
    height: 100%;
    background: pink;
    transition: all .5s;
    position: relative;
    z-index: 999;
}
#loadmorefar{
    position: relative;
}
#loadone{
    position: absolute;
    top: 20px;
    text-align: center;
    width: 100%;
    display: block;
}
#loadtwo{
    position: absolute;
    bottom: -20px;
    text-align: center;
    width: 100%;
    display: block;
}





        function loadmore(obj){

            let one = document.createElement('div');
            one.id = 'loadone';
            one.innerText = '下拉刷新';
            document.getElementById('loadmorefar').appendChild(one);

            let two = document.createElement('div');
            two.id = 'loadtwo';
            two.innerText = '上拉加载';
            document.getElementById('loadmorefar').appendChild(two);


// 上拉加载下拉刷新功能
            var s;
            document.getElementById('loadmore').ontouchstart = function (e) {
                s = e.changedTouches[0].pageY
            };
            document.getElementById('loadmore').ontouchmove = function (e) {
                let m = e.changedTouches[0].pageY;
                document.getElementById('loadtwo').innerText = '';
                // 下拉动画
                if ((m - s) > 100) {
                    document.getElementById('loadone').style.display = 'block';
                    document.getElementById('loadone').innerText = '下拉刷新';
                    document.getElementById('loadmore').style.transform = 'translate(0,150px)';
                    if (m - s > 250) {
                        document.getElementById('loadone').innerText = '释放刷新'
                    }
                    docgjument.getElementById('loadmore').ontouchend = function () {
                        document.getElementById('loadone').innerText = '刷新中...';
                        document.getElementById('loadmore').style.transform = 'translate(0,0px)';
                        // 触发的函数
                        obj.pull('下拉刷新');

                    }
                }

                // 上拉动画
                if ((m - s) < -150) {
                    document.getElementById('loadone').innerText = '';
                    document.getElementById('loadtwo').style.display = 'block';
                    document.getElementById('loadtwo').innerText = '加载中...';
                    document.getElementById('loadmore').style.transform = 'translate(0,-70px)';
                    document.getElementById('loadmore').ontouchend = function () {
                        document.getElementById('loadmore').style.transform = 'translate(0,0px)';
                        document.getElementById('loadtwo').innerText = '上拉加载更多';
                        // 触发的函数
                        obj.push('上拉加载');
                        for (var i = 0; i < 10; i++) {
                            let no = document.createElement('li');
                            no.innerText = 2;
                            document.getElementById('ul').appendChild(no)
                        }
                    }
                }
            }
        }

　　

posted on 2019-07-29 16:25  田庚的博客园  阅读(616)  评论(0)    收藏  举报

导航