ionic 滚动条 · W3School Ionic 教程

# 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(可选)`：`布尔值` 是否应用滚动动画。