Maison > Article > interface Web > Explication détaillée des étapes de mise en œuvre de l'actualisation déroulante à l'aide d'Ionic

Explication détaillée des étapes de mise en œuvre de l'actualisation déroulante à l'aide d'Ionic

php中世界最好的语言original: 2018-05-30 13:53:101547parcourir

Cette fois, je vais vous donner une explication détaillée des étapes à suivre pour utiliser ionic pour implémenter l'actualisation déroulante. Quelles sont les précautions pour qu'Ionic implémente l'actualisation déroulante. Voici un cas pratique, jetons un coup d'oeil.

<!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>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Comment utiliser Node.js pour utiliser les cookies afin de rester connecté

Comment utiliser Node .js pour utiliser les boîtes de dialogue ngDialog

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Exemple de point d'ancrage simulé vue2.0Article suivant：Exemple de point d'ancrage simulé vue2.0

Articles Liés

Voir plus