在 Ionic 中动态更新滚动区域

Update scroll area dynamically in Ionic

本文关键字：滚动 区域 更新 动态 Ionic      更新时间：2023-09-26

嗨，我有一个离子项目的代码笔。

它现在只显示一个图像，我已经做了两个按钮来放大和缩小。

问题是当我单击放大并滚动到最右侧或右下角，然后单击缩小时......滚动区域没有更新，我只剩下白屏。

如果我点击屏幕一次，滚动区域就会调整！

如何使此操作自动发生？

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>

你需要

打电话给$ionicScrollDelegate.resize()

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

这是我在Ionic中使用手风琴时遇到的一个问题.我得到的建议是在操作后使用以下代码自动更新可滚动区域（放大或缩小后）：

    $timeout($ionicScrollDelegate.resize, 100);

需要使用$timeout来确保正确调用$scope.apply()。我发现使用 0 值作为超时是不够的，并选择使用 100 毫秒。这又是我在Ionic论坛上找到的建议。您应该在文档中查看$ioncScrollDelegate及其关联的指令以获取更多信息。

相关文章：