美文网首页
mescroll和angularjs结合实现列表上拉刷新以及下拉

mescroll和angularjs结合实现列表上拉刷新以及下拉

作者: 肖欣怡 | 来源:发表于2018-08-02 15:37 被阅读0次
image.png
//这段代码表示获取数据 isUp为true表示上拉刷新 false表示下拉加载    
$scope.loadGasCompany = function(page, isUp){mui.ajax(ipPort + '/dc/queryData/load/gasCompany.do?', {
                data: {
                    pageSize: page.size,
                    pageNumber: page.num
                },
                dataType: 'json',
                type: 'post',
                async: false,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                timeout: 30000, //超时时间设置为10秒;
                success: function(data) {
                    debugger;
                    //                  $(".loader-inner").hide();
                    if(page.num != 1) {
                        mescroll.endBySize(data.length, data[0].total);
                        $scope.gasCompanydatas = $scope.gasCompanydatas.concat(data);
                        $scope.$apply();} else {
                        mescroll.endSuccess();
                        mescroll.endBySize(data.length, data[0].total);
                        $scope.gasCompanydatas = data;
                        $scope.$apply();
                    }
                    
                    //$scope.waterCompanydatas.push(data);
                    console.log($scope.gasCompanydatas);
                    $scope.$apply();
                },
                error: function(xhr, type, errorThrown) {
                    //debugger;
                    $(".loader-inner").hide();
                    //异常处理;
                    console.log(type);
                }
            });
        }

           ````
     ````
//mescroll的配置
    var mescroll = new MeScroll("mescroll", {
            down: {
                auto: false,
                callback: downCallback
            },
            up: {
                page:{
                     num : 0,
                     size : 20, 
                     time : null 
                },
                auto: true,
                callback:upCallback,
                isBounce: true 
            }
        });
function downCallback(page){
            mescroll.resetUpScroll();
            //$scope.loadGasCompany({num:1,size:20}, false);
            mescroll.endSuccess();
        }
        
        
        function upCallback(page){
            debugger;
            //$scope.page.pageNumber++;
            $scope.loadGasCompany(page, false);
            $scope.$apply();
        }
     ````
//获取全部数据 为了能够顶部筛选用
$scope.loadAllData = function() {
            mui.ajax(ipPort + '/dc/queryData/load/gasCompany.do?', {
                data: {
                    pageSize: 0,
                    pageNumber: 0
                },
                dataType: 'json',
                type: 'post',
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                timeout: 30000, //超时时间设置为10秒;
                success: function(data) {
                    debugger;
                    $scope.totalData = data;
                    $scope.$watch('searchInput', function(n, o) {
                        if(n != ""){
                            $scope.gasCompanydatas = [];
                            for(var i = 0; i < $scope.totalData.length; i++) {
                            if($scope.totalData[i].companyName.indexOf(n) >= 0) {
                                $scope.gasCompanydatas.push($scope.totalData[i]);
                            }
                        }
                        }
                        
                    }, false);
                },
                error: function(xhr, type, errorThrown) {
                    //debugger;
                    $(".loader-inner").hide();
                    //异常处理;
                    console.log(type);
                }
            });
        }
        $scope.loadAllData();

相关文章

网友评论

      本文标题:mescroll和angularjs结合实现列表上拉刷新以及下拉

      本文链接:https://www.haomeiwen.com/subject/ihfsvftx.html