ionic 头部和底部+列表+加载动作

ionic 头部和底部

ion-header-bar
这个是固定在屏幕顶部的一个头部标题栏。如果给它加上'bar-subheader' 这个样式，它就是副标题。

用法
<ion-header-bar align-title="left" class="bar-positive"> 
  <div class="buttons"> 
    <button class="button" ng-click="doSomething()">
      Left Button
    </button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons"> 
    <button class="button">
      Right Button
    </button> 
  </div>
</ion-header-bar>

<ion-content> Some content!</ion-content>
API
属性 类型 描述
align-title(optional) string 这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。
no-tap-scroll(optional) boolean 默认情况下，头部标题栏在点击屏幕时内容会滚动到头部，可以将 no-tap-scroll 设置为 true 来禁止该动作。。它的值是布尔值（true/false）。

ion-footer-bar

知道了 ion-header-bar ，理解ion-footer-bar就轻松多啦！只是 ion-footer-bar 是在屏幕的底部。

用法
<ion-content> Some content!</ion-content>

<ion-footer-bar align-title="left" class="bar-assertive"> 
  <div class="buttons"> 
    <button class="button">Left Button</button> 
  </div> 
  <h1 class="title">Title!</h1> 
  <div class="buttons" ng-click="doSomething()"> 
    <button class="button">Right Button</button> 
  </div>
</ion-footer-bar>
API

与 ion-header-bar 不同的是，ion-footer-bar 只有 align-title 这个 API。

属性 类型 描述
align-title(optional) string 这个是对齐 title 的。如果没有设置，它将会按照手机的默认排版(Ios的默认是居中，Android默认是居左)。它的值可以是 'left','center','right'。

ionic 列表操作

列表是一个应用广泛在几乎所有移动app中的界面元素。ionList 和 ionItem 这两个指令还支持多种多样的交互模式，比如移除其中的某一项，拖动重新排序，滑动编辑等等。

用法
<ion-list> 
  <ion-item ng-repeat="item in items"> 
    Hello, {{item}}! 
  </ion-item>  
</ion-list>
高级用法: 缩略图，删除按钮，重新排序，滑动
<ion-list ng-controller="MyCtrl" show-delete="shouldShowDelete" show-reorder="shouldShowReorder" can-swipe="listCanSwipe"> 
  <ion-item ng-repeat="item in items" class="item-thumbnail-left"> 
    <img ng-src="{{item.img}}"> 
    <h2>{{item.title}}</h2> 
    <p>{{item.description}}</p> 
    <ion-option-button class="button-positive" ng-click="share(item)"> 
      分享 
    </ion-option-button> 

    <ion-option-button class="button-info" ng-click="edit(item)"> 
      编辑 
    </ion-option-button> 

    <ion-delete-button class="ion-minus-circled" ng-click="items.splice($index, 1)"> 

    </ion-delete-button> 

    <ion-reorder-button class="ion-navicon" on-reorder="reorderItem(item, $fromIndex, $toIndex)"> 

    </ion-reorder-button> 

  </ion-item>
</ion-list>
API
属性 类型 详情
delegate-handle(可选) 字符串 该句柄定义带有$ionicListDelegate的列表。
show-delete(可选) 布尔值 列表项的删除按钮当前是显示还是隐藏。
show-reorder(可选) 布尔值 列表项的排序按钮当前是显示还是隐藏。
can-swipe(可选) 布尔值 列表项是否被允许滑动显示选项按钮。默认：true。
实例

【HTML 代码：】

<html ng-app="ionicApp"> 

  <head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
    <title>Ionic List Directive</title> 
    <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"> 
    <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script> 
  </head> 

  <body ng-controller="MyCtrl"> 

    <ion-header-bar class="bar-positive"> 
      <div class="buttons"> 
        <button class="button button-icon icon ion-ios-minus-outline" 
             ng-click="data.showDelete = !data.showDelete;   
                       data.showReorder = false"></button> 
      </div> 
      <h1 class="title">Ionic Delete/Option Buttons</h1> 
      <div class="buttons"> 
        <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder"> Reorder </button> 
      </div> 
    </ion-header-bar> 

    <ion-content> 
      <!-- The list directive is great, but be sure to also checkout the collection repeat directive when scrolling through large lists --> 
      <ion-list show-delete="data.showDelete" show-reorder="data.showReorder"> 
        <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate"> 
          Item {{ item.id }} 
          <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> </ion-delete-button> 
          <ion-option-button class="button-assertive" ng-click="edit(item)"> Edit </ion-option-button> 
          <ion-option-button class="button-calm" ng-click="share(item)"> Share </ion-option-button> 
          <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
        </ion-item> 
      </ion-list> 
    </ion-content> 

  </body>
</html>

【CSS 代码】

body { 
  cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}

【JavaScript 代码】

  angular.module('ionicApp', ['ionic']).controller('MyCtrl', function($scope) { 
    $scope.data = { showDelete: false }; 
    $scope.edit = function(item) { 
      alert('Edit Item: ' + item.id); 
    }; 
    $scope.share = function(item) { 
      alert('Share Item: ' + item.id); 
    }; 
    $scope.moveItem = function(item, fromIndex, toIndex) { 
      $scope.items.splice(fromIndex, 1); 
      $scope.items.splice(toIndex, 0, item); 
    }; 
    $scope.onItemDelete = function(item) { 
      $scope.items.splice($scope.items.indexOf(item), 1); 
    }; 
    $scope.items = [ 
      { id: 0 }, 
      { id: 1 }, 
      { id: 2 }, 
      { id: 3 }, 
      { id: 4 }, 
      { id: 5 }, 
      { id: 6 }, 
      { id: 7 }, 
      { id: 8 }, 
      { id: 9 }, 
      { id: 10 }, 
      { id: 11 }, 
      { id: 12 }, 
      { id: 13 }, 
      { id: 14 }, 
      { id: 15 }, 
      { id: 16 }, 
      { id: 17 }, 
      { id: 18 }, 
      { id: 19 }, 
      { id: 20 }, 
      { id: 21 }, 
      { id: 22 }, 
      { id: 23 }, 
      { id: 24 }, 
      { id: 25 }, 
      { id: 26 }, 
      { id: 27 }, 
      { id: 28 }, 
      { id: 29 }, 
      { id: 30 }, 
      { id: 31 }, 
      { id: 32 }, 
      { id: 33 }, 
      { id: 34 }, 
      { id: 35 }, 
      { id: 36 }, 
      { id: 37 }, 
      { id: 38 }, 
      { id: 39 }, 
      { id: 40 }, 
      { id: 41 }, 
      { id: 42 }, 
      { id: 43 }, 
      { id: 44 }, 
      { id: 45 }, 
      { id: 46 }, 
      { id: 47 }, 
      { id: 48 }, 
      { id: 49 }, 
      { id: 50 } 
    ]; 
  });

尝试一下 »

ionic 加载动作

$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 <small>loading指示器的选项。可用属性：
  {string=} template 指示器的html内容。
  {string=} templateUrl 一个加载html模板的url作为指示器的内容。
  {boolean=} noBackdrop 是否隐藏背景。默认情况下它会显示。
  {number=} delay 指示器延迟多少毫秒显示。默认为不延迟。
  {number=} duration 等待多少毫秒后自动隐藏指示器。默认情况下，指示器会一直显示，直到触发.hide()。</small>

隐藏一个加载效果。

hide()
API
属性 类型 详情
delegate-handle(可选) 字符串 该句柄定义带有$ionicListDelegate的列表。
show-delete(可选) 布尔值 列表项的删除按钮当前是显示还是隐藏。
show-reorder(可选) 布尔值 列表项的排序按钮当前是显示还是隐藏。
can-swipe(可选) 布尔值 列表项是否被允许滑动显示选项按钮。默认：true。
实例

【HTML 代码：】

  <html ng-app="ionicApp"> 

    <head> 
      <meta charset="utf-8"> 
      <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
      <title>Ionic Modal</title> 
      <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"> 
      <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script> 
    </head> 

    <body ng-controller="AppCtrl"> 
      <ion-view title="Home"> 

        <ion-header-bar> 
          <h1 class="title">The Stooges</h1> 
        </ion-header-bar> 

        <ion-content has-header="true"> 
          <ion-list> 
            <ion-item ng-repeat="stooge in stooges" href="#">
              {{stooge.name}}
            </ion-item> 
          </ion-list> 
        </ion-content> 

      </ion-view> 
    </body>

  </html>

【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 设置 
  };
});
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,547评论 6赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,399评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,428评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,599评论 1赞 274
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,612评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,577评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,941评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,603评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,852评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,375评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,955评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2赞 342

推荐阅读更多精彩内容

  • Android - 收藏集
    Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,401评论 25赞 707
  • 现代诗：伐树
    我听见一声喊叫，在这沟壑边缘 在这个冬天，万物都沉睡的时候 这几棵盘根的老树，被惊醒 卑鄙的行为让我记起春天 浓阴...
    伯爵男主阅读 627评论 0赞 2
  • 《灵魂的香槟》——梅麦克/著
    喜乐操练90天——31《满足的喜乐》 这些事我已经对你们说了，是要叫我的喜乐存在你们心里，并叫你们的喜乐可以满足。...
    午后的咖啡与茶阅读 514评论 0赞 0
  • 第二个最爱我的男人
    前几天给老妈打电话说想问下弟弟录取了没有，妈妈说，她们已经把他送过去了，刚回来。说爸爸一出学校的门就哭了，泪...
    麦麦尼阅读 536评论 1赞 0