Динамическое обновление области прокрутки в Ionic

Привет У меня есть эта ручка кода ионного проекта.Динамическое обновление области прокрутки в Ionic

На данный момент это только изображение, и я сделал две кнопки для увеличения и уменьшения.

Проблема заключается в том, что я нажимаю кнопку увеличения и прокручивает вправо или вправо справа, а затем уменьшаю масштаб. Область прокрутки не обновляется, и я остаюсь на белом экране.

Если я щелкнул по экрану один раз, область прокрутки настраивается!

Как это сделать автоматически?

http://codepen.io/anon/pen/VaGeeg

angular.module('ionicApp', ['ionic']) 
 

 
.controller('MyCtrl', function($scope) { 
 

 
    // get image-holder details 
 
    $scope.imageHolderDetails = document.getElementById('img-holder').getBoundingClientRect(); 
 
    $scope.imageHolderWidth = $scope.imageHolderDetails.width; 
 

 
    // get image 
 
    $scope.image = document.getElementById('image'); 
 

 
    //set zoom amount to image-holder width x 2 
 
    $scope.zoomAmount = $scope.imageHolderDetails.width * 2; 
 

 
    // set the image to full width of image-holder 
 
    $scope.image.style.width = $scope.imageHolderWidth + 'px'; 
 

 
    // zoom in 
 
    $scope.zoomIn = function() { 
 
    $scope.image.style.width = $scope.zoomAmount + 'px'; 
 
    } 
 

 
    // reset zoom 
 
    $scope.zoomOut = function() { 
 
    $scope.image.style.width = $scope.imageHolderDetails.width + 'px'; 
 
    } 
 

 
});

body { 
 
    cursor: url('http://ionicframework.com/img/finger.png'), auto; 
 
}

<html ng-app="ionicApp"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
 

 
    <title>Ionic Template</title> 
 

 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 
    <ion-header-bar class="bar-stable"> 
 
    <h1 class="title">Gummy bears anyone?</h1> 
 
    </ion-header-bar> 
 
    <ion-content id="img-holder" scroll="true" overflow-scroll="false" locking="false" direction="xy"> 
 
    <img id="image" src="https://static.pexels.com/photos/55825/gold-bear-gummi-bears-bear-yellow-55825.jpeg"> 
 
    </ion-content> 
 
    <ion-footer-bar class="bar-royal"> 
 
    <a class="tab-item" ng-click="zoomOut()"> 
 
     <i class="icon ion-minus"></i> 
 
    </a> 
 
    <a class="tab-item" ng-click="zoomIn()"> 
 
     <i class="icon ion-plus"></i> 
 
    </a> 
 
    </ion-footer-bar> 
 
</body> 
 

 
</html>

источник

2016-04-25 Lozza

Вам нужно позвонить $ionicScrollDelegate.resize()

http://codepen.io/mhartington/pen/eZLZdx

источник

2016-04-25 13:40:43 mhartington

Это проблема, я с опытом работы с аккордеонов в ионическом. Совет, который я получил, чтобы использовать следующий код после того, как ваши действия автоматически обновлять прокручивать область (после увеличения или уменьшения масштаба):

$timeout($ionicScrollDelegate.resize, 100);

Использование $timeout требуется для обеспечения $scope.apply() называется правильно. Я обнаружил, что использование значения 0 для моего таймаута было недостаточным, и вы решили использовать 100 миллисекунд. И снова это был совет, который я нашел на форумах Ionic. Вы должны проверить $ioncScrollDelegate и соответствующие директивы в документах для получения дополнительной информации.

источник

2016-04-25 13:42:03

Динамическое обновление области прокрутки в Ionic

ответ

Смежные вопросы