0

我正在使用 ionic v1 开发应用程序。

我将 ion-slide-page 放在 ion-slides 中，将 ion-scroll 放在 ion-slide-page 中，如下所示。这个离子卷轴包含一个图像。

我想要做的是在图像放大时保持幻灯片左右移动。（如脸书）

如果我放大图像，我无法在 X 轴上滚动图像。

模板：

<ion-slides options="options" slider="data.slider">
    <ion-slide-page ng-repeat="image in post.imgs">
        <ion-scroll
            direction="xy"
            scrollbar-x="false" scrollbar-y="false"
            zooming="true" min-zoom="1" max_zoom="3"
            overflow-scroll="false" locking="false" has-bouncing="true"
            style="width: 100%; height: 100%" class="vertical-center"
            delegate-handle="scrollHandle{{$index}}"
            on-release="updateSlideStatus()">
            <image style="width: 100%; height: 100%" ng-src="{{image}}"></image>
        </ion-scroll>
    </ion-slide-page>
</ion-slides>

控制器：

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
    console.log('ionic slides initialized');
    $scope.slider = data.slider;
    $scope.activeIndex = 0;
    $scope.isSwipeLocked = false;
});

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
    console.log('Slide change is beginning');
});

$scope.$on("$ionicSlides.slideChangeEnd", function(event, data) {
    console.log('ionic slides change end');
    $scope.activeIndex = data.slider.activeIndex;
    $scope.previousIndex = data.slider.previousIndex;
});

$scope.updateSlideStatus = function() {
    var zoom = $ionicScrollDelegate.$getByHandle('scrollHandle' + $scope.activeIndex).getScrollPosition().zoom;
    if (zoom === 1) {
        if ($scope.isSwipeLocked == true) {
            $scope.slider.unlockSwipes();
            $scope.isSwipeLocked = false;
        }
    } else {
        if ($scope.isSwipeLocked == false) {
            $scope.slider.lockSwipes();
            $scope.isSwipeLocked = true;
        }
    }
};

有什么想法吗？

4

0 回答 0