基于jquery的上拉加载更多

最新推荐文章于 2019-05-15 17:24:29 发布

zbctrl

最新推荐文章于 2019-05-15 17:24:29 发布

阅读量3.3k

点赞数

分类专栏： javascript jquery 文章标签： jquery 上拉加载更多

本文链接：https://blog.csdn.net/zb_ctrl/article/details/78117077

版权

javascript 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

jquery

1 篇文章 0 订阅

订阅专栏

一个简易的基于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>

zbctrl

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
1
评论
基于jquery的上拉加载更多

一个简易的基于jquery的上拉加载更多demo，上拉加载的原理就是容器的高度+容器的scrollTop>=容器内容的高度，整个demo还加上了回弹的动效。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>loadmore</title> <meta name="viewport" co
复制链接

扫一扫