<link rel="stylesheet" href="../static/css/minirefresh.css">
<script src="../static/js/minirefresh.js"></script>
        $(function () {

            // 初始化页码
            var page = 0;

            var pageSize = 10;

            // miniRefresh 对象
            var miniRefresh = new MiniRefresh({
                container: '#minirefresh',
                down: {
                    //isLock: true,//是否禁用下拉刷新
                    callback: function () {
                        doAjax('down');
                    }
                },
                up: {
                    isAuto: true,
                    callback: function () {
                        doAjax('up');
                    }
                }
            });

            // 组装 ajax 分页函数。参数 downOrUp 判断是下拉刷新还是上拉加载。
            // 特别提示：若你仅使用下拉刷新或上拉加载的其中一项，可不用组装 ajax 分页函数了，直接将 ajax 分页放在下拉刷新或上拉加载的回调 callback 里。
            var doAjax = function (downOrUp) {
                if (downOrUp == 'down') {
                    page = 1;// 下拉刷新页码设置
                    pageSize = 10;
                } else {
                    page++;// 上拉加载递增页码
                    pageSize = 10;// 
                }

                $.ajax({
                    url: 'http://47.103.52.86:8899/getShoubao',// 请求网址
                    type: 'GET',
                    data: {// 请求参数，一般会带上页码
                        'pageIndex': page,
                        'pageSize': pageSize,
                        /* 't': new Date().getTime()// 防止GET请求缓存 */
                    },
                    success: function (data) {
                        // 下面这段请根据自己的数据结构来处理
                        var arrLen = data.list.length;
                        if (arrLen > 0) {
                            var html = '';
                            $.each(data.list, function (key, value) {
                                html += `<li class="nav n1">
                <div class="nav1">
                    <div class="nav1s">
                        <p>${value.title}</p>
                        <p>2018-09-06</p>
                    </div>
                    <div class="nav1x dp">
                        <p>去点评</p>
                    </div>
                </div>
                <div class="nav2">
                    <p>${value.addres}</p>
                    <p>${value.distance}</p>
                </div>
                
            </li>`;
                            });
                            setTimeout(function () { // 使用 setTimeout 函数是方便演示的，你可以不用 setTimeout 函数
                                if (downOrUp == 'down') {
                                    $('#listdata').html('');
                                    $('#listdata').append(html);// DOM 插入数据
                                    miniRefresh.endDownLoading(true);// 结束下拉刷新
                                } else {
                                    $('#listdata').append(html);
                                    if (data.pages == page) {// 是否已取完数据页
                                        miniRefresh.endUpLoading(true);// 结束上拉加载
                                    } else {
                                        miniRefresh.endUpLoading(false);
                                    }
                                }
                            }, 600);
                        } else {
                            if (downOrUp == 'down') {
                                $('#listdata').html('');
                                miniRefresh.endDownLoading(true);
                            } else {
                                miniRefresh.endUpLoading(true);
                            }
                        }
                    },
                    error: function () {
                        if (downOrUp == 'down') {
                            $('#listdata').html('');
                            miniRefresh.endDownLoading(true);
                        } else {
                            miniRefresh.endUpLoading(true);
                        }
                    }
                });
            };

        });