ionic数据交互

最新推荐文章于 2021-02-23 18:54:24 发布

原创最新推荐文章于 2021-02-23 18:54:24 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic #数据 #交互 #数据交互

ionic，数据，交互，数据交互专栏收录该内容

1 篇文章

订阅专栏

本文演示了在Ionic应用中如何使用AngularJS的$http服务从后台获取数据，并结合下拉刷新与上拉加载功能，实现数据的动态加载。通过`$scope.getData`方法处理下拉刷新事件，而`$scope.loadMore`则处理上拉加载更多数据的逻辑。当数据加载次数达到10次后，自动禁用上拉加载事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<script>
        angular.module('ionicApp', ['ionic'])
                //如果直接从后台获取数据
                .controller("kController", ["$scope", "$http", "$timeout", function($scope, $http, $timeout) {
                    $scope.data = [];
                    $scope.moredata = true;
                    $scope.getData = function() { //在下拉刷新时会自动调用
                        console.log("getData");
                        $scope.moredata = true; //激活下拉加载事件
                        getNum = 0; //充值测试累加变量，这里是方便测试
                        $http.get("data/data1.json").then(function(res) {
                            console.log("res:",res);
                            $scope.data = []; //重置data数组中的数据否则会无限累加
                            var data = res.data.qiye.supports;
                            angular.forEach(data, function(d) {
                                $scope.data.push(d);
                            });
//                            console.log("getData:",$scope.data);
                        }, function(err) {
                            console.log(err);
                        }).finally(function() { //不管获取数据成功与否都会执行的代码（一般用于一些成功或失败都要做的动作）
                            //通知下拉完成事件
                            $scope.$broadcast("scroll.refreshComplete");
                        });
                    };
                    $scope.getData();
                    var getNum = 0;
                    $scope.loadMore = function() {
                        console.log('loadMore', getNum, $scope.moredata);
                        //当$scope.mordata为false不会执行加载更多，可在下拉刷新的时候重新激活为true
                        //可以设置分页，当数据加载完毕，如：初次加载数据只有10条，分页条数为20，设置$scope.moredata为false不会显示加载更多，多页同理
                        //这里设置一个累加变量达到一定值之后不再继续加载
                        if(getNum<10){
                            $scope.moredata=true;
                            console.log("第"+getNum+"次");
                        }
                        if (getNum >= 10) {
                            //10次之后取消上拉加载事件
                            $scope.moredata = false;
                            console.log('上拉加载事件禁用')
                            return;
                        }
                        $http.get('data/data1.json').success(function(data) {
                            $scope.data = $scope.data.concat(data.qiye.supports);
                            console.log(data);
                            /*var timer = */$timeout(function() {
                                // 停止广播上拉加载请求
                                $scope.$broadcast('scroll.infiniteScrollComplete');

                            },2000);
                            getNum++;
                        });
                    };
                    $scope.$on('stateChangeSuccess', function() {
                        $scope.loadMore();
                    });

                }])

    </script>