》寫在前面：自己留個記號，僅供自己使用，如想實現(xiàn)類似的，可以參考

一、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>
                                    ![用戶頭像](http://upload-images.jianshu.io/upload_images/1076687-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>
                                    ![用戶頭像](http://upload-images.jianshu.io/upload_images/1076687-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() {
        // 監(jiān)聽滾動條
        $(window).scroll(BottomJumpPage);

        $(window).load(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(document).height();
            var windowHeight = $(this).height();
            /* 判斷頁面初始時是否有數(shù)據(jù) */
            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) { //滾動到底部執(zhí)行事件
            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) { //滾動到頭部部執(zhí)行事件
            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('![用戶頭像](http://upload-images.jianshu.io/upload_images/1076687-0f674dc073d0954a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)');
            }else{
                html.push('![用戶頭像](http://upload-images.jianshu.io/upload_images/1076687-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;
// 監(jiān)聽商品列表滾動
function scrollHandle() {
    var wholeHeight = scrollItem.scrollHeight;
    var scrollTop = scrollItem.scrollTop;
    var divHeight = scrollItem.clientHeight;
    if (divHeight + scrollTop >= wholeHeight) {
        console.log("已經(jīng)到達底部");
        // 加載數(shù)據(jù)
        loadProductListData();
    }
}