ionic_refresher列表

最新推荐文章于 2021-05-15 22:29:39 发布

Future_Master_L

最新推荐文章于 2021-05-15 22:29:39 发布

阅读量218

点赞数

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/ionic.css" />
        <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
        <style type="text/css">
            .title {
                font-family: "微软雅黑";
                font-weight: 100;
            }
        </style>
    </head>

    <body ng-app="myApp" ng-controller="myCtrl">

        <ion-header-bar class="bar-positive">
            <h1 class="title">标题</h1>
        </ion-header-bar>

        <ion-content>
            <!--
                作者：394356286@qq.com
                时间：2017-12-13
                描述：下拉刷新
            -->
            <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()" pulling-icon="img/alert.png"></ion-refresher>

            <ul class="list">
                <li class="item" ng-repeat="x in names track by $index">{{x}}</li>
            </ul>
        </ion-content>

        <ion-footer-bar class="bar-positive">
            <h2 class="title">我是底部</h2>
        </ion-footer-bar>

        <script type="text/javascript">
            var mo = angular.module("myApp", ["ionic"]);
            mo.controller("myCtrl", function($scope, $http) {
                $scope.names = ['张三', "李四", "王五", "买六"];

                $scope.doRefresh = function() {
                    $http.get("data/data1.json").then(function(req) {
                        for(var i = 0; i < req.data.length; i++) {
                            var newName = req.data[i].name;                         
                            $scope.names.push(newName);
                        }
                        //停止刷新
                        $scope.$broadcast('scroll.refreshComplete');
                    }, function(req) {
                        $scope.names.push("no data!");
                        //停止刷新
                        $scope.$broadcast('scroll.refreshComplete');
                    })/*.finally(function() {
                        $scope.names.push("no data!1");
                        $scope.$broadcast('scroll.refreshComplete');
                    })*/;
                }

            })
        </script>
    </body>

</html>