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

發(fā)布時(shí)間：2020-09-28 21:18:40 來(lái)源：腳本之家閱讀：162 作者：Cyq_0927 欄目：web開(kāi)發(fā)

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

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title>ionic</title>

  <!--記得導(dǎo)入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--服務(wù)
    ng- 指令
    表達(dá)式 {{}}

   刷新案例
    ul--
    數(shù)據(jù)
  -->
 </head>

 <body ng-app="myApp" ng-controller="myCtrl">

  <ion-header-bar class="bar-calm">
   <h2 class="title">下拉刷新</h2>
  </ion-header-bar>
  <ion-content>
   <!--
    下拉刷新
    ion-refresher
     pulling-text 下拉的時(shí)候顯示的文本
     pulling-icon 圖標(biāo)
     onRefresh 當(dāng)刷新的時(shí)候調(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 各種標(biāo)簽，數(shù)據(jù) ng-model{{}} ，控制器 controller 邏輯代碼
    指令：一個(gè)特殊的屬性
    表達(dá)式 ： 一段代碼 ，主要功能：取數(shù)據(jù)，可以進(jìn)行運(yùn)算
    模塊：一些功能和視圖組成的整體
    服務(wù)：就是一個(gè)方法，滿足一些需要而定義的方法。內(nèi)置服務(wù)30多個(gè)
      $http
    內(nèi)置過(guò)濾器：9個(gè)
      管道符 |
  -->

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

    //定義數(shù)組、也就是model數(shù)據(jù)
    $scope.goods=[{"gname":"秋褲"},{"gname":"羽絨服"}];
    //刷新的方法
    $scope.doRefresh=function(){
     //請(qǐng)求網(wǎng)絡(luò)，加載數(shù)據(jù)
     $http.get("data.json").then(function(req){
      //取得數(shù)據(jù) ,req將數(shù)據(jù)封裝到data屬性里面了
      var d = req.data;
      //將一個(gè)集合整個(gè)加入另外一個(gè)集合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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽