移动端 H5 上拉刷新,下拉加载

http://www.mescroll.com/api.html#options

这里有几个重要的设置

1、down 下不启用下拉刷新是因为再手机端有默认的下拉刷新,会冲突,待解决

2、up 中的

  auto 是第一次自动加载;

  page是设置分页的size,一般num不在这里设置

  clearEmptyId 是没有数据时显示提示无数据的容器Id

  callback 是回调地址

 //创建MeScroll对象
                    var mescroll = new MeScroll("mescroll",
                        {
                            down: {
                                use: false
                            },
                            up: {
                                auto: true,
                                page: { size: 5 },
                                clearEmptyId: "dataList",
                                callback: upCallback //上拉加载的回调
                            }
                        });

                    /*上拉加载的回调 page = {num:1, size:10}; num:当前页 从1开始, size:每页数据条数 */
                    function upCallback(page) {
                        //console.log("upCallback_num:" + page.num);
                        var olddata = null;
                        if (page.num !== 1) {
                            olddata = $scope.orders;
                        }

                        $scope.searcher.Page = page.num;
                        $scope.searcher.Rows = page.size;
                        //console.log("Page:" + $scope.searcher.Page + "&Rows:" + $scope.searcher.Rows);
                        $http.post(apiUrl + "api/weixintruck/getlist", $scope.searcher).success(
                            function(data) {
                                //console.log(data.data);
                                if (data.code === 200) {
                                    if (data.data.TotalItem > $scope.searcher.CurrentPage * $scope.searcher.PageSize) {
                                        $scope.hasNextPage = true;
                                    } else {
                                        $scope.hasNextPage = false;
                                    }
                                    $scope.orders = data.data.Items;
                                    if (olddata !== null && typeof (olddata) !== "undefined") {
                                        $scope.orders = olddata.concat($scope.orders);
                                    }

                                    mescroll.endBySize($scope.orders.length, data.data.TotalItem);
                                } else {
                                    layer.open({
                                        content: '非法操作',
                                        skin: 'msg',
                                        time: 2 //2秒后自动关闭
                                    });
                                    mescroll.endErr();
                                }
                            }).error(function() {
                            mescroll.endErr();
                        });
                    }

 

posted @ 2017-11-08 09:09  上古时期的码农  阅读(3290)  评论(0编辑  收藏  举报