ionic 滾動條
ion-scroll
ion-scroll 用于創建一個可滾動的容器。
用法
<ion-scroll
[delegate-handle=""]
[direction=""]
[paging=""]
[on-refresh=""]
[on-scroll=""]
[scrollbar-x=""]
[scrollbar-y=""]
[zooming=""]
[min-zoom=""]
[max-zoom=""]>
...
</ion-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle(可選) | 字符串 | 該句柄利用$ionicScrollDelegate 指定滾動視圖。 |
| direction(可選) | 字符串 | 滾動的方向。 'x' 或 'y'。 默認 'y'。 |
| paging(可選) | 布爾值 | 分頁是否滾動。 |
| on-refresh(可選) | 表達式 | 調用下拉刷新， 由ionRefresher 觸發。 |
| on-scroll(可選) | 表達式 | 當用戶滾動時觸發。 |
| scrollbar-x(可選) | 布爾值 | 是否顯示水平滾動條。默認為false。 |
| scrollbar-y(可選) | 布爾值 | 是否顯示垂直滾動條。默認為true。 |
| zooming(可選) | 布爾值 | 是否支持雙指縮放。 |
| min-zoom(可選) | 整數 | 允許的最小縮放量（默認為0.5） |
| max-zoom(可選) | 整數 | 允許的最大縮放量（默認為3） |
實例
【HTML 代碼】
<ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
<div style="width: 5000px; height: 5000px;
background: url('http://www.runoob.com/try/demo_source/Europe_geological_map-en.jpg')
repeat"></div>
</ion-scroll>
【CSS 代碼】
body {
cursor: url('http://www.runoob.com/try/demo_source/finger.png'), auto;
}
【JavaScript 代碼】
angular.module('ionicApp', ['ionic']);
ion-infinite-scroll
當用戶到達頁腳或頁腳附近時，ionInfiniteScroll指令允許你調用一個函數 。
當用戶滾動的距離超出底部的內容時，就會觸發你指定的on-infinite。
用法
<ion-content ng-controller="MyController">
<ion-infinite-scroll on-infinite="loadMore()" distance="1%"> </ion-infinite-scroll>
</ion-content>
function MyController($scope, $http) {
$scope.items = [];
$scope.loadMore = function() {
$http.get('/more-items').success(function(items) {
useItems(items);
$scope.$broadcast('scroll.infiniteScrollComplete');
});
};
$scope.$on('stateChangeSuccess', function() {
$scope.loadMore();
});
}
當沒有更多數據加載時，就可以用一個簡單的方法阻止無限滾動，那就是angular的ng-if 指令:
<ion-infinite-scroll
ng-if="moreDataCanBeLoaded()"
icon="ion-loading-c"
on-infinite="loadMoreData()">
</ion-infinite-scroll>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| on-infinite | 表達式 | 當滾動到底部時觸發的事件。 |
| distance(可選) | 字符串 | 從底部滾動到觸發on-infinite表達式的距離。默認: 1%。 |
| icon(可選) | 字符串 | 當加載時顯示的圖標。默認: 'ion-loading-d'。 |
$ionicScrollDelegate
授權控制滾動視圖（通過ion-content 和 ion-scroll指令創建）。
該方法直接被$ionicScrollDelegate服務觸發，來控制所有滾動視圖。用 $getByHandle方法控制特定的滾動視圖。
用法
<body ng-controller="MainCtrl">
<ion-content>
<button ng-click="scrollTop()">
滾動到頂部!
</button>
</ion-content>
</body>
function MainCtrl($scope, $ionicScrollDelegate) {
$scope.scrollTop = function() {
$ionicScrollDelegate.scrollTop();
};
}
方法
resize()
告訴滾動視圖重新計算它的容器大小。
scrollTop([shouldAnimate])
| 參數 | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應用滾動動畫。 |
scrollBottom([shouldAnimate])
| 參數 | 類型 | 詳情 |
|---|---|---|
| shouldAnimate(可選) | 布爾值 | 是否應用滾動動畫。 |
ionic 側欄菜單
一個容器元素包含側邊菜單和主要內容。通過把主要內容區域從一邊拖動到另一邊，來讓左側或右側的側欄菜單進行切換。
效果圖如下所示：
用法
要使用側欄菜單，添加一個父元素<ion-side-menus>，一個中間內容 <ion-side-menu-content>，和一個或更多 <ion-side-menu> 指令。
<ion-side-menus>
<!-- 中間內容 -->
<ion-side-menu-content ng-controller="ContentController">
</ion-side-menu-content>
<!-- 左側菜單 -->
<ion-side-menu side="left">
</ion-side-menu>
<!-- 右側菜單 -->
<ion-side-menu side="right">
</ion-side-menu>
</ion-side-menus>
function ContentController($scope, $ionicSideMenuDelegate) {
$scope.toggleLeft = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| enable-menu-with-back-views(可選) | 布爾值 | 在返回按鈕顯示時，確認是否啟用側邊欄菜單。 |
| delegate-handle | 字符串 | 該句柄用于標識帶有$ionicScrollDelegate的滾動視圖。 |
ion-side-menu-content
一個可見主體內容的容器，同級的一個或多個ionSideMenu 指令。
用法
<ion-side-menu-content
drag-content="true">
</ion-side-menu-content>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| drag-content(可選) | 布爾值 | 內容是否可被拖動。默認為true。 |
ion-side-menu
一個側欄菜單的容器，同級的一個ion-side-menu-content 指令。
用法
<ion-side-menu
side="left"
width="myWidthValue + 20"
is-enabled="shouldLeftSideMenuBeEnabled()">
</ion-side-menu>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| side | 字符串 | 側欄菜單當前在哪一邊。可選的值有: 'left' 或 'right'。 |
| is-enabled(可選) | 布爾值 | 該側欄菜單是否可用。 |
| width(可選) | 數值 | 側欄菜單應該有多少像素的寬度。默認為275。 |
menu-toggle
在一個指定的側欄中切換菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<ion-view>
<ion-nav-buttons side="left">
<button menu-toggle="left" class="button button-icon icon ion-navicon"></button>
</ion-nav-buttons>
...
</ion-view>
menu-close
關閉當前打開的側欄菜單。
用法
下面是一個在導航欄內鏈接的例子。點擊此鏈接會自動打開指定的側欄菜單。
<a menu-close href="#/home" class="item">首頁</a>
$ionicSideMenuDelegate
該方法直接觸發$ionicSideMenuDelegate服務，來控制所有側欄菜單。用$getByHandle方法控制特定情況下的ionSideMenus。
用法
<body ng-controller="MainCtrl">
<ion-side-menus>
<ion-side-menu-content>
內容!
<button ng-click="toggleLeftSideMenu()">
切換左側側欄菜單
</button>
</ion-side-menu-content>
<ion-side-menu side="left">
左側菜單!
</ion-side-menu>
</ion-side-menus>
</body>
function MainCtrl($scope, $ionicSideMenuDelegate) {
$scope.toggleLeftSideMenu = function() {
$ionicSideMenuDelegate.toggleLeft();
};
}
方法
toggleLeft([isOpen])
切換左側側欄菜單（如果存在）。
| 屬性 | 類型 | 詳情 |
|---|---|---|
| isOpen(可選) | 布爾值 | 是否打開或關閉菜單。默認：切換菜單。 |
toggleRight([isOpen])
切換右側側欄菜單（如果存在）。
| 屬性 | 類型 | 詳情 |
|---|---|---|
| isOpen(可選) | 布爾值 | 是否打開或關閉菜單。默認：切換菜單。 |
getOpenRatio()
獲取打開菜單內容超出菜單寬度的比例。比如，一個寬度為100px的菜單被寬度為50px以50%的比例打開，將會返回一個比例值為0.5。
**返回值: **浮點 0 表示沒被打開，如果左側菜單處于已打開或正在打開為0 到 1，如果右側菜單處于已打開或正在打開為0 到-1。
isOpen()
**返回值: **布爾值，判斷左側或右側菜單是否已經打開。
isOpenLeft()
**返回值: **布爾值左側菜單是否已經打開。
isOpenRight()
**返回值: **布爾值右側菜單是否已經打開。
canDragContent([canDrag])
| 屬性 | 類型 | 詳情 |
|---|---|---|
| canDrag(可選) | 布爾值 | 設置是否可以拖動內容打開側欄菜單。 |
返回值: 布爾值，是否可以拖動內容打開側欄菜單。
$getByHandle(handle)
| 屬性 | 類型 | 詳情 |
|---|---|---|
| handle | 字符串 | ? |
例如:
$ionicSideMenuDelegate.$getByHandle('my-handle').toggleLeft();
ionic 滑動框
ion-slide-box
滑動框是一個包含多頁容器的組件，每頁滑動或拖動切換：
效果圖如下：
用法
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
API
| 屬性 | 類型 | 詳情 |
|---|---|---|
| delegate-handle(可選) | 字符串 | 該句柄用$ionicSlideBoxDelegate 來標識這個滑動框。 |
| does-continue(可選) | 布爾值 | 滑動框是否開啟循環滾動。 |
| slide-interval(可選) | 數字 | 等待多少毫秒開始滑動（如果繼續則為true）。默認為4000。 |
| show-pager(可選) | 布爾值 | 滑動框的頁面是否顯示。 |
| pager-click(可選) | 表達式 | 當點擊頁面時，觸發該表達式（如果shou-pager為true）。傳遞一個'索引'變量。 |
| on-slide-changed(可選) | 表達式 | 當滑動時，觸發該表達式。傳遞一個'索引'變量。 |
| active-slide(可選) | 表達式 | 將模型綁定到當前滑動框。 |
實例
【HTML 代碼】
<ion-slide-box active-slide="myActiveSlide">
<ion-slide>
<div class="box blue"><h1>BLUE</h1></div>
</ion-slide>
<ion-slide>
<div class="box yellow"><h1>YELLOW</h1></div>
</ion-slide>
<ion-slide>
<div class="box pink"><h1>PINK</h1></div>
</ion-slide>
</ion-slide-box>
【CSS 代碼】
.slider {
height: 100%;
}
.slider-slide {
color: #000;
background-color: #fff;
text-align: center;
font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif; font-weight: 300;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.pink {
background-color: pink;
}
.box{
height:100%;
}
.box h1{
position:relative;
top:50%;
transform:translateY(-50%);
}
【JavaScript 代碼】
angular.module('ionicApp', ['ionic'])
.controller('SlideController', function($scope) {
$scope.myActiveSlide = 1;
})
