gpt4 book ai didi

javascript - 在 Ionic 中动态更新滚动区域

转载 作者:行者123 更新时间:2023-11-28 05:22:32 24 4
gpt4 key购买 nike

你好,我有一个 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>

最佳答案

你需要调用$ionicScrollDelegate.resize()

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

关于javascript - 在 Ionic 中动态更新滚动区域,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36840551/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com