ionic刷新

来源：互联网发布：江国香织知乎编辑：程序博客网时间：2024/05/17 23:33

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8">
       <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
       <title></title>
       <link rel="stylesheet" href="css/ionic.css" />
       <script type="text/javascript" src="js/ionic.bundle.min.js"></script>
   </head>

   <body ng-app="myapp" ng-controller="cre">
       
       <ion-header-bar class="bar-positive">
           <h1 class="title">下拉刷新</h1>
       </ion-header-bar>
       
       <ion-content>
           
           <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>
   </body>
   <script type="text/javascript">
       //注入
       var mo = angular.module("myapp", ["ionic"]);
       //创建控制器
       mo.controller("cre", function($scope,$http) {
               //定义数组
               $scope.names = ['张三',"李四","王五","买六"];
               //获取数据的方法
               $scope.doRefresh=function(){
                   $http.get("dat/data1.json").then(function(red){
                       //获取json里的内容
                       var name1=red.data;
                       for(var i=0;i<name1.length;i++){
                       //放到数组里
                       $scope.names.push(name1[i].name);
                       }
                       //停止刷新//发送广播
                       $scope.$broadcast('scroll.refreshComplete');
                   },function(req){
                       //停止刷新
                       $scope.$broadcast('scroll.refreshComplete');
                   }).finally(function(){
                       //停止刷新
                       $scope.$broadcast('scroll.refreshComplete');
                   });
               }

       })
   </script>

</html>

阅读全文

0 0