Scroll-Bereich dynamisch in Ionic aktualisieren

Hallo Ich habe diesen Code Stift eines ionischen Projekts.Scroll-Bereich dynamisch in Ionic aktualisieren

Es zeigt nur ein Bild für jetzt und ich habe zwei Schaltflächen zum Vergrößern und Verkleinern gemacht.

Das Problem ist, wenn ich klicken Sie auf vergrößern und scrollen Sie ganz nach rechts oder unten rechts, klicken Sie dann auf verkleinern ... Der Bildlaufbereich wird nicht aktualisiert und ich bin mit einem weißen Bildschirm verlassen.

Wenn ich dann einmal auf den Bildschirm klicke, wird der Bildlaufbereich angepasst!

Wie kann ich das automatisch machen?

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>

Quelle

2016-04-25 Lozza

Sie benötigen ich mit Akkordeons in Ionic erfahrenen Arbeits $ionicScrollDelegate.resize()

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

Quelle

2016-04-25 13:40:43 mhartington

Dies ist ein Problem zu nennen. Der Rat, den ich gegeben wurde war es, den folgenden Code zu verwenden, nachdem Ihre Aktionen den rollbaren Bereich automatisch zu aktualisieren (nach vergrößern oder verkleinern):

$timeout($ionicScrollDelegate.resize, 100);

Die Verwendung von $timeout erforderlich ist $scope.apply(), um sicherzustellen, richtig genannt. Ich fand einen Wert von 0 für meine Zeitüberschreitung war nicht ausreichend und entschied sich für die Verwendung von 100 Millisekunden. Wieder war dies ein Rat, den ich in den ionischen Foren fand. Sie sollten $ioncScrollDelegate und zugehörige Richtlinien in den Dokumenten für weitere Informationen überprüfen.

Quelle

2016-04-25 13:42:03

Scroll-Bereich dynamisch in Ionic aktualisieren

Antwort

Verwandte Themen