美文网首页
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