Heim >Web-Frontend >js-Tutorial >Detaillierte Erläuterung der Schritte zur Implementierung der Pulldown-Aktualisierungsfunktion in ionic

Detaillierte Erläuterung der Schritte zur Implementierung der Pulldown-Aktualisierungsfunktion in ionic

php中世界最好的语言Original: 2018-05-22 11:04:531578Durchsuche

Dieses Mal werde ich Ihnen die Schritte zum Implementieren der Pulldown-Aktualisierungsfunktion in ionic ausführlich erläutern Praktischer Fall, werfen wir einen Blick darauf.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ionic</title>
  <!--记得导入ionic包和ionic样式-->
  <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
  <link rel="stylesheet" type="text/css" href="css/ionic.css" rel="external nofollow" />
  <!--
   ionic
   angular
    $http--服务
    ng- 指令
    表达式 {{}}
   刷新案例
    ul--
    数据
  -->
 </head>
 <body ng-app="myApp" ng-controller="myCtrl">
  <ion-header-bar class="bar-calm">
   <h1 class="title">下拉刷新</h1>
  </ion-header-bar>
  <ion-content>
   <!--
    下拉刷新
    ion-refresher
     pulling-text 下拉的时候显示的文本
     pulling-icon 图标
     onRefresh 当刷新的时候调用的方法
   -->
   <ion-refresher pulling-text="松手刷新..." on-refresh = "doRefresh()" pulling-icon="img/arrow-down-c.png">
   </ion-refresher>
   <ul class="list">
    <li class="item" ng-repeat="good in goods">{{good.gname}}</li>
   </ul>
  </ion-content>
  <!--
   angular
    mvc 视图 view 各种标签，数据 ng-model{{}} ，控制器 controller 逻辑代码
    指令：一个特殊的属性
    表达式 ： 一段代码 ，主要功能：取数据，可以进行运算
    模块：一些功能和视图组成的整体
    服务：就是一个方法，满足一些需要而定义的方法。内置服务30多个
      $http
    内置过滤器：9个
      管道符 |
  -->
  <script type="text/javascript">
   //创建模块
   var mod = angular.module("myApp",["ionic"]);//[]里面的是需要注入的对象。两个:ngRoute /ionic
   //创建控制器
   mod.controller("myCtrl",function($scope,$http){
    //定义数组、也就是model数据
    $scope.goods=[{"gname":"秋裤"},{"gname":"羽绒服"}];
    //刷新的方法
    $scope.doRefresh=function(){
     //请求网络，加载数据
     $http.get("data.json").then(function(req){
      //取得数据 ,req将数据封装到data属性里面了
      var d = req.data;
      //将一个集合整个加入另外一个集合contact()
//      $scope.goods= $scope.goods.contact(d);
      for (var i =0;i<d.length;i++) {
       $scope.goods.unshift(d[i]);
      }
      //结束刷新
      $scope.$broadcast("scroll.refreshComplete");
     },function(req){
      alert("失败");
     });
//     .finally(function(){
//      
//     });
    }
   });
  </script>
 </body>
</html>

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Verwendung von Cookies, um angemeldet zu bleiben

Analyse von Vue.js Download-Methode und Verwendungsschritte

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung der Pulldown-Aktualisierungsfunktion in ionic. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：AngularJS-Modalbox-Vorlage ngDialog-AnwendungsfallfreigabeNächster Artikel：AngularJS-Modalbox-Vorlage ngDialog-Anwendungsfallfreigabe

In Verbindung stehende Artikel

Mehr sehen