javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(scrollView): make xy scrolling work on ionScroll and ionContent

Browse Source 
Closes #1462
This commit is contained in:
Andrew Joslin
2014-05-21 13:09:35 -06:00
parent 93e01915c2
commit 49f06f9c3d
4 changed files with 57 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
js/angular/directive/content.js vendored
View File

@@ -23,11 +23,14 @@
*
* @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=} padding Whether to add padding to the content.
* of the content. Defaults to true on iOS, false on Android.
* @param {boolean=} scroll Whether to allow scrolling of content. Defaults to true.
* @param {boolean=} overflow-scroll Whether to use overflow-scrolling instead of
* Ionic scroll.
* @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=} has-bouncing Whether to allow scrolling to bounce past the edges
* of the content. Defaults to true on iOS, false on Android.
* @param {expression=} on-scroll Expression to evaluate when the content is scrolled.
@@ -77,20 +80,19 @@ function($timeout, $controller, $ionicBind) {
$scope.$hasFooter = $scope.$hasSubfooter =
$scope.$hasTabs = $scope.$hasTabsTop =
false;
$ionicBind($scope, $attr, {
$onScroll: '&onScroll',
$onScrollComplete: '&onScrollComplete',
hasBouncing: '@',
padding: '@',
hasScrollX: '@',
hasScrollY: '@',
direction: '@',
scrollbarX: '@',
scrollbarY: '@',
startX: '@',
startY: '@',
scrollEventInterval: '@'
});
$scope.direction = $scope.direction || 'y';
if (angular.isDefined($attr.padding)) {
$scope.$watch($attr.padding, function(newVal) {
@@ -113,8 +115,8 @@ function($timeout, $controller, $ionicBind) {
startY: $scope.$eval($scope.startY) || 0,
scrollbarX: $scope.$eval($scope.scrollbarX) !== false,
scrollbarY: $scope.$eval($scope.scrollbarY) !== false,
scrollingX: $scope.$eval($scope.hasScrollX) === true,
scrollingY: $scope.$eval($scope.hasScrollY) !== false,
scrollingX: $scope.direction.indexOf('x') >= 0,
scrollingY: $scope.direction.indexOf('y') >= 0,
scrollEventInterval: parseInt($scope.scrollEventInterval, 10) || 10,
scrollingComplete: function() {
$scope.$onScrollComplete({

1
js/angular/directive/list.js vendored
View File

@@ -203,6 +203,7 @@
* }
* .animated-item {
* line-height: 52px;
* max-height: 52px;
* padding-top: 0;
* padding-bottom: 0;
* -webkit-transition: all 0.15s linear;

5
js/angular/directive/scroll.js vendored
View File

@@ -10,11 +10,11 @@
*
* @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'. Default 'y'.
* @param {string=} direction Which way to scroll. 'x' or 'y' or 'xy'. Default 'y'.
* @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 false.
* @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)
@@ -53,6 +53,7 @@ function($timeout, $controller, $ionicBind) {
minZoom: '@',
maxZoom: '@'
});
$scope.direction = $scope.direction || 'y';
if (angular.isDefined($attr.padding)) {
$scope.$watch($attr.padding, function(newVal) {

50
test/html/scroll.html
View File

@@ -50,9 +50,8 @@
<body ng-controller="ThisCtrl">
<ion-pane>
<ion-content class="has-header" scroll="false">
<ion-scroll class="has-header" direction="xy" style="width:100%;height:50%;">
<h3>Hourly Forecast</h3>
<ion-scroll direction="x" style="width: 100%; height: 20%;">
<div class="hours">
<div ng-repeat="hour in hours">
<div class="icons">
@@ -65,14 +64,57 @@
</div>
</div>
</div>
</ion-scroll>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<br/><p>...</p>
<a class="button" ng-click="scrollTo()">
Scroll to 100
</a>
<ion-scroll direction="y" style="height: 400px; width: 300px; background: red;">
<div style="width: 100px; height: 4000px; background: url('tree_bark.png') repeat"></div>
</ion-scroll>
</ion-content>
</ion-scroll>
</ion-pane>
<script>