ionic_refresher列表

来源：互联网发布：手机淘宝好评在哪里写编辑：程序博客网时间：2024/05/30 23:41
<!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>
阅读全文
0 0