template中实现上拉加载，下拉刷新效果。

关于template中渲染数据，当页面的数据比较多的时　候，需要用到一个上拉加载，下拉刷新这个操作

可以结合　dropload　的使用。

1．需要在gethub中下载dropload的 css 样式和 js 代码。 https://github.com/ximan/dropload

<link rel="stylesheet" type="text/css" href="${req.contextPath}/css/dropload.css">
 
<script src="${req.contextPath}/js/dropload.js"></script>

2．注意引入js的顺序，要引到用的前面。
3.官方的js代码。

$('.element').dropload({
    scrollArea : window,
    loadDownFn : function(me){
        $.ajax({
            type: 'GET',
            url: 'json/more.json',
            dataType: 'json',
            success: function(data){
                alert(data);
                // 每次数据加载完，必须重置
                me.resetload();
            },
            error: function(xhr, type){
                alert('Ajax error!');
                // 即使加载出错，也得重置
                me.resetload();
            }
        });
    }
});

4．我的 js 代码

$('body').dropload({
    scrollArea: window,
    domUp: {
        domClass: 'dropload-up',
        domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
        domUpdate: '<div class="dropload-update">↑释放更新</div>',
        domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData: '<div class="dropload-noData">没有更多</div>'
    },
    domDown: {
        domClass: 'dropload-down',
        domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
        domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
        domNoData: '<div class="dropload-noData">没有更多</div>'
    },
    loadDownFn: function (me) {
        // 每次数据加载完，必须重置
        reloadData(me);
    }
});

function reloadData(me) {
    data.indexNo++;
    $.post("../../../order/list", data, function (res) {
        // console.log(indexNo)
        if (res.code == '0000') {
            var pageCount = res.data.pageCount;
            if (data.indexNo > pageCount) {
                console.log("没有更多了");
                data.indexNo--;
                me.noData();
                // 每次数据加载完，必须重置
                me.resetload();
                return;
            }
            var distanceArry = [];
            $.each(res.data.dataList, function (i, v) {
                var lon = v.courseInfoDetail.orgInfo.longitude;
                var lan = v.courseInfoDetail.orgInfo.latitude;
                var orgName = v.courseInfoDetail.orgInfo.name;
                var shareDTO = v.shareDTO;
                var orderId = v.id;
                $(".listHtml").append(template("info-tpl", v));

                distanceArry.push('.distance' + orderId + '-' + lon + '-' + lan + '-' + orgName);
                // console.log(distanceArry);
                //点击地图跳转定位
                $(".MapDistance" + orderId).click(function (res) {
                    window.location.href = 'https://uri.amap.com/marker?position=' + lon + ',' + lan + '&name=' + orgName;
                });
                //点击跳转到不同的页面
                if (v.orderStatus == 7) {
                    $(".statuShow").click(function () {
                        window.location.href = '../../../h5/share/open/' + shareDTO.id;
                    })
                } else if (v.orderStatus == 1) {
                    $(".statuShow").click(function () {
                        window.location.href = '../../../h5/share/open/' + shareDTO.id;
                    })
                } else if (v.orderStatus == 9) {
                    $(".statuShow").click(function () {
                        if (v.shareDTO) {
                            window.location.href = '../../../h5/share/open/' + shareDTO.id;
                        }
                    })
                } else if (v.orderStatus == 7 && userOpenGroup) {
                    $(".statuShow").click(function () {
                        window.location.href = '../../../h5/order/detail/' + v.id;
                    })
                } else if (v.orderStatus == 6) {
                    $(".statuShow").click(function () {
                        window.location.href = '../../../h5/share/open/' + shareDTO.id;
                    })
                } else if (v.orderStatus == 1 || v.orderStatus == 2 || v.orderStatus == 3) {
                    $(".statuShow").click(function () {
                        window.location.href = '../../../h5/share/open/' + shareDTO.id;
                    })
                }
            });
            //距离
            if (distanceArry) {
                var distanceInterval = setInterval(function () {
                    console.log(distanceInterval);
                    lonSelf = $("#lon").val();
                    lanSelf = $("#lan").val();
                    if (lonSelf && lanSelf) {
                        for (var i in distanceArry) {
                            var iArry = distanceArry[i].split("-");
                            // console.log(iArry)
                            if (iArry) {
                                locatiuon(iArry[1], iArry[2], lonSelf, lanSelf, iArry[3], $(iArry[0]));
                            }
                        }
                        clearInterval(distanceInterval);
                    }
                }, 500)
            }
            me.resetload();
        } else {
            if(login()){

            }
        }
    });
}