【轉】ionicLoading，ionic-spinner SVG旋轉加載

lpjustdoit 發布于2019-08-20 18:25 / 428人閱讀

摘要：原文鏈接加載動作是默認的一個加載交互效果。方法顯示一個加載效果。默認情況下，指示器會一直顯示，直到觸發。可選布爾值列表項是否被允許滑動顯示選項按鈕。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。該圖標采用的是。

原文鏈接：http://www.cnblogs.com/xuan-0...

ionic 加載動作 $ionicLoading
$ionicLoading 是 ionic 默認的一個加載交互效果。里面的內容也是可以在模板里面修改。

angular.module("LoadingApp", ["ionic"])
.controller("LoadingCtrl", function($scope, $ionicLoading) {
  $scope.show = function() {
    $ionicLoading.show({
      template: "Loading..."
    });
  };
  $scope.hide = function(){
    $ionicLoading.hide();
  };
});

方法

顯示一個加載效果。

show(opts)
參數類型詳情
opts object
loading指示器的選項。可用屬性：

{string=} template 指示器的html內容。
{string=} templateUrl 一個加載html模板的url作為指示器的內容。
{boolean=} noBackdrop 是否隱藏背景。默認情況下它會顯示。
{number=} delay 指示器延遲多少毫秒顯示。默認為不延遲。
{number=} duration 等待多少毫秒后自動隱藏指示器。默認情況下，指示器會一直顯示，直到觸發.hide()。
隱藏一個加載效果。

hide()
API

屬性類型詳情
delegate-handle
(可選)
字符串
該句柄定義帶有$ionicListDelegate的列表。

show-delete
(可選)
布爾值
列表項的刪除按鈕當前是顯示還是隱藏。

show-reorder
(可選)
布爾值
列表項的排序按鈕當前是顯示還是隱藏。

can-swipe
(可選)
布爾值
列表項是否被允許滑動顯示選項按鈕。默認：true。

實例
HTML 代碼：


  
    
     
    
    Ionic Modal

     
    
  

    
      
        
          The Stooges
        
        
          
            {{stooge.name}}

JavaScript 代碼

angular.module("ionicApp", ["ionic"])
.controller("AppCtrl", function($scope, $timeout, $ionicLoading) {

  // Setup the loader
  $ionicLoading.show({
    content: "Loading",
    animation: "fade-in",
    showBackdrop: true,
    maxWidth: 200,
    showDelay: 0
  });
  
  // Set a timeout to clear loader, however you would actually call the $ionicLoading.hide(); method whenever everything is ready or loaded.
  $timeout(function () {
    $ionicLoading.hide();
    $scope.stooges = [{name: "Moe"}, {name: "Larry"}, {name: "Curly"}];
  }, 2000);
  
});

$ionicLoadingConfig
設置加載的默認選項:

用法:

var app = angular.module("myApp", ["ionic"])
app.constant("$ionicLoadingConfig", {
  template: "默認加載模板……"
});
app.controller("AppCtrl", function($scope, $ionicLoading) {
  $scope.showLoading = function() {
    $ionicLoading.show(); //配置選項在 $ionicLoadingConfig 設置
  };
});

ion-spinner
ionSpinner 提供了許多種旋轉加載的動畫圖標。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。

該圖標采用的是SVG。

用法

//默認用法

像大部分其他的ionic組件一樣，spinner也可以使用ionic的標準顏色命名規則，就像下面這樣：

實例
HTML 代碼

CSS 代碼

body {
  cursor: url("http://www.runob.com/try/demo_source/finger.png"), auto;
}    
p {
  text-align: center;
  margin-bottom: 40px !important;
}
.spinner svg {
  width: 19% !important;
  height: 85px !important;
}

JavaScript 代碼

angular.module("ionicApp", ["ionic"])

.controller("MyCtrl", function($scope) { 
  
});

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84487.html

【轉】ionicLoading，ionic-spinner SVG旋轉加載

摘要：原文鏈接加載動作是默認的一個加載交互效果。方法顯示一個加載效果。默認情況下，指示器會一直顯示，直到觸發。可選布爾值列表項是否被允許滑動顯示選項按鈕。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。該圖標采用的是。原文鏈接：http://www.cnblogs.com/xuan-0... showImg(https://segmentfault.com/img/bVRSWB?w=6...

Coly 2019-08-01 17:17 評論0 收藏0
【轉】ionicLoading，ionic-spinner SVG旋轉加載

摘要：原文鏈接加載動作是默認的一個加載交互效果。方法顯示一個加載效果。默認情況下，指示器會一直顯示，直到觸發。可選布爾值列表項是否被允許滑動顯示選項按鈕。當你的界面加載時，你就可以呈現給用戶相應的加載圖標。該圖標采用的是。原文鏈接：http://www.cnblogs.com/xuan-0... showImg(https://segmentfault.com/img/bVRSWB?w=6...

20171112 2019-08-29 13:04 評論0 收藏0
ionic實現下載文件并打開功能（file-transfer和file-opener2插件）

摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個插件能夠在比較容易的實現這個功能。作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個插件能夠在ionic比較容易的實現這個功能。 1、安裝： cordova...

cfanr 2019-08-26 11:43 評論0 收藏0
ionic實現下載文件并打開功能（file-transfer和file-opener2插件）

摘要：作為一款，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用和這兩個插件能夠在比較容易的實現這個功能。作為一款app，下載文件功能，和打開文件功能，在某些場景下還是十分有必要的。使用cordova-plugin-file-transfer和cordova-plugin-file-opener2這兩個插件能夠在ionic比較容易的實現這個功能。 1、安裝： cordova...

fengxiuping 2019-08-01 18:34 評論0 收藏0
iconfont實踐小結

摘要：所以實現小圖標時雪碧圖跟圖標字體會在一個網站共存，自定義圖標字體為什么比較耗時，且太復雜圖標無法實現請往下看開發流程就了解了。參考資料細談淺談圖標字體向下兼容優雅降級技術繪制小圖標技巧雪碧圖圖標字體矢量小圖標設計本文對應源碼源碼地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前寫了一篇關于雪碧圖的博文，...

bitkylin 2019-08-29 13:00 評論0 收藏0