【轉(zhuǎn)】ionicLoading，ionic-spinner SVG旋轉(zhuǎn)加載

Coly 發(fā)布于2019-08-01 17:17 / 1890人閱讀

摘要：原文鏈接加載動(dòng)作是默認(rèn)的一個(gè)加載交互效果。方法顯示一個(gè)加載效果。默認(rèn)情況下，指示器會(huì)一直顯示，直到觸發(fā)。可選布爾值列表項(xiàng)是否被允許滑動(dòng)顯示選項(xiàng)按鈕。當(dāng)你的界面加載時(shí)，你就可以呈現(xiàn)給用戶相應(yīng)的加載圖標(biāo)。該圖標(biāo)采用的是。

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

ionic 加載動(dòng)作 $ionicLoading
$ionicLoading 是 ionic 默認(rèn)的一個(gè)加載交互效果。里面的內(nèi)容也是可以在模板里面修改。

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

方法

顯示一個(gè)加載效果。

show(opts)
參數(shù) 類型詳情
opts object
loading指示器的選項(xiàng)?？捎脤傩裕?/p>

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

hide()
API

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

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

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

can-swipe
(可選)
布爾值
列表項(xiàng)是否被允許滑動(dòng)顯示選項(xiàng)按鈕。默認(rèn)：true。

實(shí)例
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
設(shè)置加載的默認(rèn)選項(xiàng):

用法:

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

ion-spinner
ionSpinner 提供了許多種旋轉(zhuǎn)加載的動(dòng)畫圖標(biāo)。當(dāng)你的界面加載時(shí)，你就可以呈現(xiàn)給用戶相應(yīng)的加載圖標(biāo)。

該圖標(biāo)采用的是SVG。

用法

//默認(rèn)用法

像大部分其他的ionic組件一樣，spinner也可以使用ionic的標(biāo)準(zhǔn)顏色命名規(guī)則，就像下面這樣：

實(shí)例
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) { 
  
});

GPU云服務(wù)器云服務(wù)器 svg轉(zhuǎn)html php 轉(zhuǎn)svg ionicLoading SVG

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/51080.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Coly

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

干貨|app自動(dòng)化測試之設(shè)備交互API詳解

閱讀 1919·2021-09-23 11:21
flex布局，子元素寬度不符合預(yù)期

閱讀 1704·2019-08-29 17:27
關(guān)于Http協(xié)議，你必須要知道的

閱讀 1062·2019-08-29 17:03
前端面試實(shí)習(xí)題目總結(jié)：

閱讀 729·2019-08-29 15:07
JS中只有按值傳遞

閱讀 1927·2019-08-29 11:13
JavaScript面向?qū)ο笾械睦^承個(gè)人分享

閱讀 2385·2019-08-26 12:14
前端代碼質(zhì)量進(jìn)階：自定義 eslint 規(guī)則校驗(yàn)業(yè)務(wù)邏輯

閱讀 931·2019-08-26 11:52
every()some()個(gè)人理解

閱讀 1736·2019-08-23 17:09

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

【轉(zhuǎn)】ionicLoading，ionic-spinner SVG旋轉(zhuǎn)加載

The Stooges

相關(guān)文章