ionic 드 롭 다운 새로 고침 데이터 기능 구현

본 논문 의 사례 는 ionic 드 롭 다운 으로 데 이 터 를 불 러 오 는 구체 적 인 코드 를 공유 하여 여러분 께 참고 하 시기 바 랍 니 다.구체 적 인 내용 은 다음 과 같 습 니 다.

<!DOCTYPE html>
<html ng-app="myApp">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
     content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <link rel="stylesheet" href="js/lib/ionic1/css/ionic.min.css" rel="external nofollow" >
  <script src="js/lib/ionic1/js/ionic.bundle.min.js"></script>
  <title>Title</title>
  <!--
           
        ion-refresher:          ~  ~       【              】
        ion-infinite-scroll :     ,       ,                ,           ,【         ;   PC      】
-->
</head>
<body ng-controller="myCtrl">
<!--    -->
<ion-header-bar class="bar-royal">
  <h1 class="title">    </h1>
</ion-header-bar>
<!--  -->
<ion-content>
  <!-- 1.          -->
  <ion-refresher
      pulling-text="        ..."
      on-refresh="doRefresh()">
  </ion-refresher>

  <!--ng-repent     -->
<ul class="list">
  <li ng-repeat="g in goodses">
    <span ng-bind="g"></span>
  </li>
</ul>
</ion-content>
<!--    -->
  <ion-footer-bar class="bar-royal">
    <h1 class="title">    </h1>
  </ion-footer-bar>
<script>
  var app=angular.module("myApp",["ionic"]);
  app.controller("myCtrl",["$scope",function ($scope) {
    $scope.goodses=[];
    for(var i=0;i<50;i++){
      $scope.goodses.push(i+"      ")
    }
    $scope.doRefresh=function () {
      //      
      $scope.goodses=[];
      for(var i=0;i<50;i++){
        $scope.goodses.push(i+"      ****")
      }
      /*
             ,          
                , Angular     $scope.$apply()       ,
               ionic ,          ,
         $scope.$broadcase("scroll.refreshComplete")          ,
               ,        
       */

      //     ion-refresher
      $scope.$broadcast('scroll.refreshComplete');
    }
  }])
</script>
</html>

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.

좋은 웹페이지 즐겨찾기