Headers/Footers（页眉页脚）

ion-header-bar

在内容顶部添加一个固定header栏。
如果应用'bar-subheader'类，就可以成为一个subheader（在下面）。查看header CSS文档。
用法

 
   
     
   
  Title! 
   
     
  


 一些内容!

API

属性	类型	详情
align-title(可选)	字符串	标题对齐的位置。可用: 'left', 'right', or 'center'。默认为 'center'。

ion-footer-bar

在内容底部添加一个固定的footer栏。
如果应用'bar-subfooter'类，就成了一个subfooter（在上面）。查看footer CSS 文档。
用法

 一些内容!

 
   
     
   
  Title!

API

属性	类型	详情
align-title(可选)	字符串	标题对齐的位置。可用: 'left', 'right', or 'center'。默认为 'center'。

Content（内容）

ion-content

授权: $ionicScrollDelegate

ionContent指令提供一个易用的内容区域，该区域可以用Ionic的自定义滚动视图进行配置，或浏览器内置的溢出滚动。

在大多数情况下，我们建议使用Ionic的定制滚动功能，有时（出于性能原因）仅用浏览器原生的溢出滚动就足够了，因此我可以轻松地在设置了Ionic滚动和溢出滚动间切换。
你可以用ionRefresher
指令实现拉动刷新，并可以用ionInfiniteScroll
指令实现无限滚动。

用法

...

API

属性	类型	详情
delegate-handle(可选)	字符串	该句柄用于标识带有$ionicScrollDelegate的滚动视图。
padding(可选)	布尔值	是否在内容上添加内填充。在iOS上默认为true，在Android上为false。
scroll(可选)	布尔值	是否允许内容滚动。默认为true。
overflow-scroll(可选)	布尔值	是否用溢出滚动代替Ionic滚动。
has-bouncing(可选)	布尔值	是否允许内容滚动反弹到边缘。iOS上默认为true，Android上默认为false。
on-scroll(可选)	表达式	当内容滚动时表现的评估。
on-scroll-complete(可选)	表达式	一个滚动动作完成时表现的评估。

ion-refresher

隶属于ionContent 或 ionScroll

允许你添加下拉刷新滚动视图。
把它作为ionContent 或 ionScroll
元素的第一个子元素。
当刷新完成时，从你的控制器中广播（$broadcast）出'scroll.refreshComplete'事件。

用法

angular.module('testApp', ['ionic'])
.controller('MyController', function($scope, $http) { 
  $scope.items = [1,2,3]; 
  $scope.doRefresh = function() { 
    $http.get('/new-items') 
      .success(function(newItems) { 
        $scope.items = newItems; 
      }) 
      .finally(function() { 
        // 停止广播ion-refresher 
        $scope.$broadcast('scroll.refreshComplete'); 
      }); 
  };
});

API

属性	类型	详情
on-refresh(可选)	表达式	当用户下拉到一定程度然后开始刷新时触发。
on-pulling(可选)	表达式	当用户开始下来刷新时触发。
pulling-icon(可选)	字符串	当用户下拉时显示的图标。默认: 'ion-arrow-down-c'。
pulling-text(可选)	字符串	当用户下拉时显示的文字。
refreshing-icon(可选)	字符串	用户刷新后显示的图标。
refreshing-text(可选)	字符串	用户刷新后显示的文字。

ion-pane

一个简单的适应内容的容器，无不良影响。在一个元素上添加 'pane'。

用法

...

ionic-JS：Headers/Footers（页眉页脚）+ Content（内容）