mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
117 lines
4.4 KiB
JavaScript
117 lines
4.4 KiB
JavaScript
/**
|
|
* @ngdoc directive
|
|
* @name ionScroll
|
|
* @module ionic
|
|
* @delegate ionic.service:$ionicScrollDelegate
|
|
* @codepen mwFuh
|
|
* @restrict E
|
|
*
|
|
* @description
|
|
* Creates a scrollable container for all content inside.
|
|
*
|
|
* @usage
|
|
*
|
|
* Basic usage:
|
|
*
|
|
* ```html
|
|
* <ion-scroll zooming="true" direction="xy" style="width: 500px; height: 500px">
|
|
* <div style="width: 5000px; height: 5000px; background: url('https://upload.wikimedia.org/wikipedia/commons/a/ad/Europe_geological_map-en.jpg') repeat"></div>
|
|
* </ion-scroll>
|
|
* ```
|
|
*
|
|
* Note that it's important to set the height of the scroll box as well as the height of the inner
|
|
* content to enable scrolling. This makes it possible to have full control over scrollable areas.
|
|
*
|
|
* If you'd just like to have a center content scrolling area, use {@link ionic.directive:ionContent} instead.
|
|
*
|
|
* @param {string=} delegate-handle The handle used to identify this scrollView
|
|
* with {@link ionic.service:$ionicScrollDelegate}.
|
|
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
|
|
* @param {boolean=} locking Whether to lock scrolling in one direction at a time. Useful to set to false when zoomed in or scrolling in two directions. Default true.
|
|
* @param {boolean=} paging Whether to scroll with paging.
|
|
* @param {expression=} on-refresh Called on pull-to-refresh, triggered by an {@link ionic.directive:ionRefresher}.
|
|
* @param {expression=} on-scroll Called whenever the user scrolls.
|
|
* @param {boolean=} scrollbar-x Whether to show the horizontal scrollbar. Default true.
|
|
* @param {boolean=} scrollbar-y Whether to show the vertical scrollbar. Default true.
|
|
* @param {boolean=} zooming Whether to support pinch-to-zoom
|
|
* @param {integer=} min-zoom The smallest zoom amount allowed (default is 0.5)
|
|
* @param {integer=} max-zoom The largest zoom amount allowed (default is 3)
|
|
* @param {boolean=} has-bouncing Whether to allow scrolling to bounce past the edges
|
|
* of the content. Defaults to true on iOS, false on Android.
|
|
*/
|
|
IonicModule
|
|
.directive('ionScroll', [
|
|
'$timeout',
|
|
'$controller',
|
|
'$ionicBind',
|
|
function($timeout, $controller, $ionicBind) {
|
|
return {
|
|
restrict: 'E',
|
|
scope: true,
|
|
controller: function() {},
|
|
compile: function(element, attr) {
|
|
element.addClass('scroll-view ionic-scroll');
|
|
|
|
//We cannot transclude here because it breaks element.data() inheritance on compile
|
|
var innerElement = jqLite('<div class="scroll"></div>');
|
|
innerElement.append(element.contents());
|
|
element.append(innerElement);
|
|
|
|
return { pre: prelink };
|
|
function prelink($scope, $element, $attr) {
|
|
var scrollView, scrollCtrl;
|
|
|
|
$ionicBind($scope, $attr, {
|
|
direction: '@',
|
|
paging: '@',
|
|
$onScroll: '&onScroll',
|
|
scroll: '@',
|
|
scrollbarX: '@',
|
|
scrollbarY: '@',
|
|
zooming: '@',
|
|
minZoom: '@',
|
|
maxZoom: '@'
|
|
});
|
|
$scope.direction = $scope.direction || 'y';
|
|
|
|
if (angular.isDefined($attr.padding)) {
|
|
$scope.$watch($attr.padding, function(newVal) {
|
|
innerElement.toggleClass('padding', !!newVal);
|
|
});
|
|
}
|
|
if($scope.$eval($scope.paging) === true) {
|
|
innerElement.addClass('scroll-paging');
|
|
}
|
|
|
|
if(!$scope.direction) { $scope.direction = 'y'; }
|
|
var isPaging = $scope.$eval($scope.paging) === true;
|
|
|
|
var scrollViewOptions= {
|
|
el: $element[0],
|
|
delegateHandle: $attr.delegateHandle,
|
|
locking: ($attr.locking || 'true') === 'true',
|
|
bouncing: $scope.$eval($attr.hasBouncing),
|
|
paging: isPaging,
|
|
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
|
|
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
|
|
scrollingX: $scope.direction.indexOf('x') >= 0,
|
|
scrollingY: $scope.direction.indexOf('y') >= 0,
|
|
zooming: $scope.$eval($scope.zooming) === true,
|
|
maxZoom: $scope.$eval($scope.maxZoom) || 3,
|
|
minZoom: $scope.$eval($scope.minZoom) || 0.5
|
|
};
|
|
if (isPaging) {
|
|
scrollViewOptions.speedMultiplier = 0.8;
|
|
scrollViewOptions.bouncing = false;
|
|
}
|
|
|
|
scrollCtrl = $controller('$ionicScroll', {
|
|
$scope: $scope,
|
|
scrollViewOptions: scrollViewOptions
|
|
});
|
|
scrollView = $scope.$parent.scrollView = scrollCtrl.scrollView;
|
|
}
|
|
}
|
|
};
|
|
}]);
|