加载更多。。。

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

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

.page__bd {
    width: 100%;
}

3、html

            

                

                        
                            

                                

                                    ![用户头像](http://upload-images.jianshu.io/upload_images/1076687-0f674dc073d0954a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                
                            
                        
                        
                            

                                

                                    ![用户头像](http://upload-images.jianshu.io/upload_images/1076687-a2bf5fbc89c3e35d.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
                                
                            
                        
                        
                            

                                ![](${model.avatar})
                            
                        
                    

                    

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('
');

        html.push('
');

        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('
');

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

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

        html.push('
');

        return html.join("");
    }

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

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

2、html

                        
 
                            
                            

                                
小黄人蛋糕
                                
X 1 （个）
 
                                
¥：1001.00
                            
                        
                        
   
                            
                            

                                
小黄人蛋糕
                                
X 1 （个）
                                
¥：1001.00
                            
                        
                    

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();
    }
}