上拉加载更多

最新推荐文章于 2022-11-07 22:51:44 发布

fk129

最新推荐文章于 2022-11-07 22:51:44 发布

阅读量178

点赞数

分类专栏：前端

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>我的优惠券</title>
    <script src="themesmobile/mo_paleng_moban/js/one.js"></script>
    <link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/commen.css">
    <link rel="stylesheet" href="themesmobile/mo_paleng_moban/css/myCoupon.css">
    <style>
        .loading {
            margin-bottom: 40px;
            background: #f2f2f2;
            height: 25px;
            overflow: hidden;
            justify-content: center;
            /*padding-bottom: 75px;*/
            display: none;
            text-align: center;
        }       
        .loading img{
            width: 15px;
            height: 15px;
        }
    </style>
</head>
<body>
    <header>
        <img src="themesmobile/mo_paleng_moban/images/couponImg/back.png" alt="">
        历史记录
        <a href="user_coupon.php?act=myCoupon" class="toOther">我的卡券</a>
    </header>
    <div class="tip"></div>
    <ul>
        <!-- <li class="clearfix" style="background: url('themesmobile/mo_paleng_moban/images/couponImg/taked.png') no-repeat center;">
                <div class="left">
                    <h2>全品类抵扣券</h2>
                    <p class="sum">
                        ￥<span style="font-size: 58px; margin-right: 15px;">30</span>
                        <span style="font-size: 24px; color: #878787;">消费满100.00可用</span>
                    </p>
                </div>
                <div class="right">

                </div>
            </li> -->
    </ul>

    <!--加载更多dom结构-->
    <div class="loading">
        <span>加载中...</span>
        <img src="http://www.youtasc.com/shops/resources/images_my/load.gif">
    </div>


    <script src="themesmobile/mo_paleng_moban/js/jquery.min.js"></script>
    <script>
        var page=1; //定义页数
        var onoff=true; //控制loading开关

        $(document).ready(function(){
            $('body').css('display','none');
            $('body').fadeIn(800);
        })
        $('header img').on('click',function(){
            history.go(-1);
        });

        //isFirst参数  
        //在调用该方法的时候要做一个判断 
        //如果是首次加载数据 在没有数据的情况下提示没有数据
        //如果是在上拉加载中获取数据  在没有数据的情况下提示“这是我的底线”
        function getDate(isFirst=0){ 
            $.ajax({
            url:'user_coupon.php?act=my_coupon_history',
            type:'post',
            dataType:'json',
            data:{
                "page":page
            },
            success:function(res){
                console.log(res);
                // 无数据
                if(res.status==201){
                    if(isFirst==1){
                        // 首次加载无数据
                        onoff=false;  //当没有数据的时候，加载状态要关闭
                        $('.loading').hide();
                        $('.tip').html('<p style="font-size:24px; color:#ccc; margin:200px auto; text-align:center;">您还没有历史记录</p>');
                    }else{
                        // 下拉加载无数据
                        onoff=false;  //当没有数据的时候，加载状态要关闭
                        $('.loading').html("<span>这是我的底线</span>");
                    }   
                }else{
                    // 有数据
                    $('.loading').html('<span>加载中...</span><img src="themesmobile/mo_paleng_moban/images/wdtj-jzgd_03.gif">');
                    var str='';
                    $.each(res.data.result,function(i,k){
                        str+='<li class="clearfix" style="background: url('+ (k.status==2?"themesmobile/mo_paleng_moban/images/couponImg/used.png":"themesmobile/mo_paleng_moban/images/couponImg/overdue.png") +') no-repeat center;">';
                        str+='<div class="left">';
                        str+='<h2>'+k.coupon_name+'</h2>';
                        str+='<p class="sum">￥<span style="font-size: 58px; margin-right: 15px;">'+k.amount+'</span><span style="font-size: 24px; color: #878787;"> '+k.end_time+'到期</span></p>';
                        str+='</div></li>'
                    })

                    //有数据的时候要做判断
                    //如果当前是第一页，则把容器中的内容即为请求数据
                    //如果当前不是第一页，则容器内容为本次请求数据和之前请求数据的拼接，所以这里用appendTo追加
                    if(page==1){
                        $('ul').html(str);
                    }else{
                        $(str).appendTo($('ul'));               
                    }
                    onoff=true; //当有数据的时候，上拉加载更多的状态为true
                }

            }
        });
        }

        //当页面加载的时候要请求数据，此时为第一次请求，请求参数为1
        getDate(1);

        //上拉加载更多
        $(document).scroll(function() {
            if($(window).height()+$(document).scrollTop()>=$(document.body).height()){
                $(".loading").show()
                if (onoff) {
                    onoff=false
                    setTimeout(function(){
                        page++
                        getDate(); //上拉加载更多请求数据，不是第一次请求数据，不需要传参，采用默认参数
                    },500)
                }
            }
        })

    </script>
</body>
</html>

onoff相当于一个开关锁。
当onoff=false的时候，即没有数据的时候，关锁，禁止上拉加载更多。
当onoff=true的时候，即有数据的时候，开锁，允许上拉加载更多。

作者：韩大璐
来源：CSDN
原文：https://blog.csdn.net/weixin_41257563/article/details/81508648
版权声明：本文为博主原创文章，转载请附上博文链接！

这篇https://blog.csdn.net/weixin_39654784/article/details/81610095博文中，有几种上拉加载更多的写法