ionic 滚动条

ion-scroll

ion-scroll 用于创建一个可滚动的容器。

用法

[delegate-handle=""]

[direction=""]

[paging=""]

[on-refresh=""]

[on-scroll=""]

[scrollbar-x=""]

[scrollbar-y=""]

[zooming=""]

[min-zoom=""]

[max-zoom=""]>

...

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 代码

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。

用法

on-infinite="loadMore()"

distance="1%">

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 指令:

ng-if="moreDataCanBeLoaded()"

icon="ion-loading-c"

on-infinite="loadMoreData()">

API

属性

类型

详情

on-infinite

表达式

当滚动到底部时触发的事件。

distance

(可选)

字符串

从底部滚动到触发on-infinite表达式的距离。默认: 1%。

icon

(可选)

字符串

当加载时显示的图标。默认: 'ion-loading-d'。

$ionicScrollDelegate

授权控制滚动视图(通过ion-content 和 ion-scroll指令创建)。

该方法直接被$ionicScrollDelegate服务触发，来控制所有滚动视图。用 $getByHandle方法控制特定的滚动视图。

用法

滚动到顶部!

function MainCtrl($scope, $ionicScrollDelegate) {

$scope.scrollTop = function() {

$ionicScrollDelegate.scrollTop();

};

}

方法resize()

告诉滚动视图重新计算它的容器大小。

scrollTop([shouldAnimate])

参数

类型

详情

shouldAnimate

(可选)

布尔值

是否应用滚动动画。

scrollBottom([shouldAnimate])

参数

类型

详情

shouldAnimate

(可选)

布尔值

是否应用滚动动画。