基于ionic實現(xiàn)下拉刷新功能

更新時間：2018年05月10日 17:00:39 作者：Cyq_0927

這篇文章主要為大家詳細介紹了基于ionic實現(xiàn)下拉刷新功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了ionic實現(xiàn)下拉刷新功能的具體代碼，供大家參考，具體內(nèi)容如下

<!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--
    數(shù)據(jù)
  -->
 </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 當刷新的時候調(diào)用的方法
   -->
   <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 各種標簽，數(shù)據(jù) ng-model{{}} ，控制器 controller 邏輯代碼
    指令：一個特殊的屬性
    表達式 ： 一段代碼 ，主要功能：取數(shù)據(jù)，可以進行運算
    模塊：一些功能和視圖組成的整體
    服務：就是一個方法，滿足一些需要而定義的方法。內(nèi)置服務30多個
      $http
    內(nèi)置過濾器：9個
      管道符 |
  -->

  <script type="text/javascript">
   //創(chuàng)建模塊
   var mod = angular.module("myApp",["ionic"]);//[]里面的是需要注入的對象。兩個:ngRoute /ionic
   //創(chuàng)建控制器
   mod.controller("myCtrl",function($scope,$http){

    //定義數(shù)組、也就是model數(shù)據(jù)
    $scope.goods=[{"gname":"秋褲"},{"gname":"羽絨服"}];
    //刷新的方法
    $scope.doRefresh=function(){
     //請求網(wǎng)絡，加載數(shù)據(jù)
     $http.get("data.json").then(function(req){
      //取得數(shù)據(jù) ,req將數(shù)據(jù)封裝到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]);
      }
      //結(jié)束刷新
      $scope.$broadcast("scroll.refreshComplete");
     },function(req){
      alert("失敗");
     });
//     .finally(function(){
//      
//     });

    }
   });
  </script>
 </body>
</html>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: