移动端无限滚动加载以及loadding，加载完毕效果

       <div class="content">
            <ul>
            </ul>
            
            //方式一：css自定义loadding效果---当使用第二种方式layer时，这里的div就不需要了。
       		<div id="loadding">
             	<div class="circle1"></div>
             	<div class="circle2"></div>
              	<p>加载中，请稍后</p>
        	</div>
        	
      </div>

.content{
    width: 3.35rem;
    margin: 0 auto;
    height: 5.59rem;
    position: relative;
}
.content  ul{
    padding: .3rem .25rem 0.19rem .2rem;
    width: 3.35rem;
    margin: 0 auto;
    overflow: auto;
    position: absolute;
    top:.04rem;
    bottom: 1.25rem;
    background:#FCFCFC;
}
.content  .list{
    font-size: .15rem;
    font-family: Source Han Sans CN Regular, Source Han Sans CN Regular-Regular;
    font-weight: 700;
    color: #4d4d4d;
    margin-bottom:.1rem ;
    padding-bottom: .05rem;
    border-bottom:.01rem solid #C9C9C9;
}
.content  .list a{
line-height: .25rem;
}

.item{
    color: #4d4d4d;
}
.item-time{
    text-align: right;
}

#loadding {
    width: 3.35rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin: 0 auto;
    background:rgba(0,0,0,.1);
}
#loadding > p{
    position: absolute;
    bottom: 1.6rem;
    color: #fff;
    font-size:.16rem;
    user-select: none;

}
.circle1{
    width: .4rem;
    height: .4rem;
    border: .03rem solid #fff;
    border-radius: 50%;
    border-left-color: transparent;
    border-bottom-color: transparent;
    z-index: 999;
    animation-name: circleAnimation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.circle2{
    width:.4rem;
    height: .4rem;
    border: .03rem solid #fff;
    border-radius: 50%;
    border-right-color: transparent;
    border-left-color: transparent;
    position: absolute;
    animation-name: circleAnimation;
    animation-duration: 1.5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
@keyframes circleAnimation{
    to{
        transform: rotate(360deg);
    }
}
 .content .over{
        color: #999;
        width: 1rem;
        height: 1rem;
        font-size: 0.15rem;
        margin: .2rem auto;
}

<script>
// 无限滚动加载
function scrollLoad() {
    let page = 1;
    let limit = 10;
    let flag = true;
    //渲染数据
    function renderData(data) {
        if (data.code) {
            let list = data.result.data;
            console.log(list)
            let htmlStr = '';
            for (let i =0;i<list.length;i++){
                htmlStr +='<li class="list"><a href='+list[i].url +'target="_blank" class="item">'+list[i].showTitle+'</a><p class="item-time">'+list[i].dateStr+'</p></li>'
            }
            let ulEle = document.querySelector('.content ul')
            ulEle.innerHTML += htmlStr;
            flag = true;
            //没有更多数据时。加载完毕时显示。
            if(data.result.data.length ==  0){
                console.log("over")
                $(".content ul").append("<li class='over'>加载完毕</li>")
                flag=false;
            }
        }
    }

    //发起ajax请求
    function sendAjax(page,limit) {
        var columnId = "${columnId}" == "" ? -1 : Number("${columnId}");
        var params = {
            page: page,
            size: limit,
            wheres: {
                columnCode: "${columnCode}",
                columnId: "${columnId}" == "" ? -1 : Number("${columnId}"),
                specialName: "",
                columnName: "",
                contributorTime_start: "",
                contributorTime_end: "",
                title: "${queryStr}",
                units: "",
                organizationId: "${organizationId}"
            }
        }
        $.ajax({
            url: "/static/columnPage?_model=" + encodeURI(JSON.stringify(params)),
            type: 'get',
            data: {
                page,
                limit
            },
            dataType: 'json',

            // loadding显示
            beforeSend:function(){
                //第一种方式
               $('#loadding').show()
               
               //第二种方式：引用layer的loadding样式
            //layer.load(2); //又换了种风格
            },
            success:function(data) {
                console.log(data)
                //第一种方式
                 $('#loadding').hide()
                    
              //第二种方式：引用layer的loadding样式
              //  layer.close(layer.load(2));
             
                renderData(data);
            }
        })
    }
    //页面初始化时，请求10条商品信息
    function init() {
        sendAjax(page,limit);
    }
    //当页面滚动到底部时加载新数据
    function scroll() {
        let winHeight = document.documentElement.clientHeight;
        window.onscroll = function () {
            let scrollTop = document.documentElement.scrollTop;
            let docHeight = document.documentElement.getBoundingClientRect().height;
            if (scrollTop + winHeight >= docHeight - 50) {
                // 发起新的请求
                if (flag) {
                    page++;
                    sendAjax(page,limit)
                    flag = false;
                }
            }
        }
    }
    init();
    scroll();
}
scrollLoad();


</script>