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" stylex="width: 500px; height: 500px"> <div stylex="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(可選) | 布爾值 | 是否應用滾動動畫。 |
※JSP 客戶端請求
※MongoDB 管理工具: Rockmongo
TAG:程序員小新人學習 |