首页 > 代码库 > 免插件，简单实现上拉加载loading

免插件，简单实现上拉加载loading

2024-09-05 06:17:08   217人阅读

上拉加载是前端经常遇到的问题，采用插件往往能够轻松解决，这里介绍一种免插件简单实现上拉加载的方法，参考一下，下面分享一下代码。

 

html

    <body> 
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
        <div class=‘ball-pulse‘>加载更多</div>
    </body>

加入了css3动画loading效果；

css

        <style type="text/css">
            
            /*loading效果*/
            @-webkit-keyframes scale {
                0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
                80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
            }
            @keyframes scale {
                0% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
                45% {-webkit-transform: scale(0.1);transform: scale(0.1);opacity: 0.7; }
                80% {-webkit-transform: scale(1);transform: scale(1);opacity: 1; }
            }
            
            .ball-pulse > div:nth-child(1) {
                -webkit-animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.12s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div:nth-child(2) {
                -webkit-animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.24s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div:nth-child(3) {
                -webkit-animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08);
                animation: scale 0.75s 0.36s infinite cubic-bezier(.2, .68, .18, 1.08); }
            .ball-pulse > div {
                background-color: #aaa;
                width: 7px;
                height: 7px;
                border-radius: 100%;
                margin: 2px;
                display: inline-block; }
            .ball-pulse{text-align: center;color:#aaa;background:#EDF4F4; font-size:16px;height:1.5rem;line-height: 1rem;}
            
            body,html,ul,li{padding:0;margin:0;}
            ul li{height:4.5rem;background:#ccc;border-bottom:2px solid #aaa;
                list-style: none;}
        </style>

 

js部分：

    <script type="text/javascript" src="http://www.mamicode.com/jquery-2.1.0.js"></script>
    <script type="text/javascript">
        $(function(){
            /****************** 滚动上拉下拉加载 ***************/
            $(document).on("scroll",function() {
                var scrollTop = $(this).scrollTop();
                var scrollHeight = $(document).height();
                var windowHeight = $(window).height();
                if ($(".ul li").length == 10) {
                    $(".ball-pulse").html("已经到底了！")
                }else{
                    if (scrollTop + windowHeight == scrollHeight ) {
                        //console.log("我到底部了");
                        setTimeout(getmore,600)
                        function getmore(){
                            $(".ball-pulse").html("<div></div><div></div><div></div>")
                            setTimeout(function(){
                                $(".ball-pulse").html("加载更多")
                                $("ul").append("<li></li><li></li><li></li>")
 　　　　　　　　　　　　　　　　},1000)
 　　　　　　　　　　　　　　}
　　　　　　　　　　　　} 
　　　　　　　　　　} 
　　　　　　}); 
　　　　}) 
　　</script>

 

当然我们也可以在加载的时候做下js判断，如果数据加载完毕，loading显示“已经到底了！”，这就看我们自己的发挥了，这个demo更适用于移动端页面使用，希望能帮助大家。

 

免插件，简单实现上拉加载loading


联系
我们