加载更多。。。

》写在前面：自己留个记号，仅供自己使用，如想实现类似的，可以参考

一、wap端
1、首先来个weui.css
2、写上下面一块css

.page__bd {
    width: 100%;
}

3、html

<ul class="custom-list">

            <c:forEach items="${models}" var="model">

                <li class="clearFix"><c:choose>
                        <c:when test="${empty model.avatar and empty model.phone}">
                            <div>
                                <div>
                                    ![用户头像](https://img.haomeiwen.com/i1076687/0f674dc073d0954a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                </div>
                            </div>
                        </c:when>
                        <c:when test="${empty model.avatar  and not empty model.phone }">
                            <div>
                                <div>
                                    ![用户头像](https://img.haomeiwen.com/i1076687/a2bf5fbc89c3e35d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                </div>
                            </div>
                        </c:when>
                        <c:otherwise>
                            <div>
                                ![](${model.avatar})
                            </div>
                        </c:otherwise>
                    </c:choose>

                    <ul>

4、js

$(function() {
        // 监听滚动条
        $(window).scroll(BottomJumpPage);

        $(window).load(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            /* 判断页面初始时是否有数据 */
            var customListHeight = $(".custom-list").height();
            if (customListHeight == 0 || customListHeight < windowHeight-58) {
                $(".page__bd").hide();
            }
        });

    });

    // 判断是否到达底部
    function BottomJumpPage() {
        var scrollTop = $(this).scrollTop();
        var scrollHeight = $(document).height();
        var windowHeight = $(this).height();
        console.dir("scrollTop" + scrollTop);
        console.dir(scrollHeight);
        console.dir(windowHeight);
        if (scrollTop + windowHeight == scrollHeight) { //滚动到底部执行事件
            console.dir("我到底部了"); 
            //$(".custom-list").append(getOrderHtml("df"));
            var pageIndex = parseInt($("#pageIndex").val()) + 1;
            $.getJSON("/distribution/user/list?pageIndex=" + pageIndex,
                    function(data) {
                        if (data.list.length < 15) {
                            $(".page__bd").hide();
                        } else {
                            $(".page__bd").show();
                        }
                        $.each(data.list, function(index, user) {
                            console.log(pageIndex);
                            $("#pageIndex").val(data.pageIndex);
                            var html = getOrderHtml(user);
                            $(".custom-list").append(html);
                        });
                    });
        }
        if (scrollTop == 0) { //滚动到头部部执行事件
            console.dir("我到头部了");
        }
    };

    function getOrderHtml(user) {
        var html = [];
        html.push('<li class="clearFix">');

        html.push('<div>');

        if(user.avatar==""||user.avatar==undefined||user.avatar==user){
            if(user.phone==""||user.phone==undefined||user.phone==user){
                html.push('![用户头像](https://img.haomeiwen.com/i1076687/0f674dc073d0954a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');
            }else{
                html.push('![用户头像](https://img.haomeiwen.com/i1076687/a2bf5fbc89c3e35d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');
            }

        } else {
            html.push('![]('+user.avatar+')');
        }

        html.push('</div>');

        html.push('<ul>');
        if (user.nickname == "") {
            html.push('<li>客户：【匿名】</li>');
        } else {
            html.push('<li>客户：' + user.nickname + '</li>');
        }

        html.push('<li>&nbsp</li>');
        html.push('<li>手机：' + user.phone + '</li>');
        html.push('<li>访问IP：******</li>');
        html.push('<li>地址：北京市*****</li>');
        html.push('<li>注册时间：' + new Date(user.createTime).format("yyyy-MM-dd")
                + ' </li>');
        html.push('</ul>');

        html.push('</li>');

        return html.join("");
    }

二、固定高度的div加载更多
1、css

.commonInputBorderBox {
    min-height: 150px;
    border: 1px solid #95989A;
    height: 500px;
    position: relative;
}

2、html

<div class="floatl commonInputHuiBtnBox commonInputBtnBox">

                        <div class="right-o-list-goodsMsg-imgMsg"> 
                            <img alt="" src="" class="floatl">
                            <div class="floatl">
                                <div>小黄人蛋糕</div>
                                <div>X 1 （个）</div> 
                                <div>¥：1001.00</div>
                            </div>
                        </div>
                        <div class="right-o-list-goodsMsg-imgMsg">   
                            <img alt="" src="" class="floatl">
                            <div class="floatl">
                                <div>小黄人蛋糕</div>
                                <div>X 1 （个）</div>
                                <div>¥：1001.00</div>
                            </div>
                        </div>
                    </div>

3、js

var scrollItem = document.getElementById("goodsListBox");
scrollItem.onscroll = scrollHandle;
// 监听商品列表滚动
function scrollHandle() {
    var wholeHeight = scrollItem.scrollHeight;
    var scrollTop = scrollItem.scrollTop;
    var divHeight = scrollItem.clientHeight;
    if (divHeight + scrollTop >= wholeHeight) {
        console.log("已经到达底部");
        // 加载数据
        loadProductListData();
    }
}