基于jquery的上拉加载更多

来源：互联网发布：手机阅读软件免费下载编辑：程序博客网时间：2024/06/10 14:46
一个简易的基于jquery的上拉加载更多demo，上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度，整个demo还加上了回弹的动效。
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>loadmore</title>    <meta name="viewport" content="width=device-width, initial-scale=1">    <style type="text/css">        html,body{            height:100%;            overflow: auto;            -webkit-overflow-scrolling: touch;        }        html,body,div,ul,li,img,p{            padding: 0;            margin: 0;        }        .container{            position: relative;            width: 100%;            height: 100%;            background-color: #eee;            overflow: auto;            -webkit-overflow-scrolling: touch;            box-sizing: border-box;            --webkit-box-sizing: border-box;        }        ul,li{            list-style-type: none;        }        ul{            height: auto;        }        ul li{            height: 50px;            padding: 10px;            border-bottom: 1px solid #eee;            line-height: 50px;        }        .loadmore{            text-align: center;            height: 0px;            line-height: 30px;            background-color: #999;            display: none;            transition: height 1s;            -moz-transition: height 1s; /* Firefox 4 */            -webkit-transition: height 1s;  /* Safari 和 Chrome */            -o-transition: height 1s;   /* Opera */        }        .loadmore.show{            display: block;            height: 30px;        }    </style></head><body>    <div class="container">        <ul>            <li>1</li>            <li>4</li>            <li>3</li>            <li>4</li>            <li>4</li>            <li>2</li>            <li>gff</li>            <li>tggf</li>            <li>1</li>            <li>4</li>            <li>3</li>            <li>4</li>            <li>4</li>            <li>2</li>            <li>gff</li>            <li>tggf</li>            <li>1</li>            <li>4</li>            <li>3</li>            <li>4</li>            <li>4</li>            <li>2</li>            <li>gff</li>            <li>tggf</li>        </ul>        <div class="loadmore">加载更多</div>    </div>    <script src="http://code.jquery.com/jquery-2.2.4.js"></script>    <script type="text/javascript">        $(function(){            var loadFlag = false;            var _stary,_endy;            $(".container").on("touchend",function(){                $(".container").stop().animate({top:0},80);                if($(this).height()+$(this).scrollTop()>=$(".container ul").height() && !loadFlag){                    loadFlag = true;                    $(".loadmore").addClass("show");                    $(this).scrollTop(100000000000);                    var str = "<li>sfsaasdfsafasf</li>";                    for(var i = 0;i<3;i++){                        str +=str;                    }                    setTimeout(function(){                        $(".loadmore").removeClass("show");                        $(".container ul").append(str);                        loadFlag = false;                    },1000);                }            });            $(".container").on("touchstart",function(e){                var _touch = e.originalEvent.targetTouches[0];                _stary= _touch.pageY;            });            $(".container").on("touchmove",function(e){                var _touch = e.originalEvent.targetTouches[0];                _endy= _touch.pageY;                if($(this).height()+$(this).scrollTop()>=$(".container ul").height()){                    var current_y = _endy - _stary;                    $(".container").animate({top:current_y/3},5);                }            });        });    </script></body></html>
阅读全文
0 0