javascript - 在图像缩放期间禁用滑动器

Question

我希望能够将设备上的缩放缩放到嵌入我的 ionic 应用程序中 Swiper ( http://idangero.us/swiper/ ) 元素内的图像中。

使用下面的代码，我可以放大图像，但 $scope.slider.lockSwipes() 会锁定 X 轴以防止任何类型的使用，如果没有它，在尝试滚动 X 轴时会触发下一张幻灯片用一根手指。

(如果您不熟悉 ionic:ion-slides 是基于 Swiper 构建的)。

非常感谢您的帮助。

模板:

 <ion-slides options="options" slider="data.slider">
  <ion-slide-page ng-repeat="map in maps">
    <div class="callout {{map.name}}">
      <ion-scroll
        zooming="true"
        direction="xy"
        delegate-handle="zoom-pane"
        class="zoom-pane"
        min-zoom="1"
        max-zoom="15"
        overflow-scroll="false"
        on-release="onRelease()">
          <img src="{{map.image}}"></img>
    </div>
  </ion-slide-page>
</ion-slides>

脚本:

 $scope.options = {
  loop: true,
  effect: 'slide',
  speed: 500
 }

$scope.onRelease = function(e) {
  var scrollDelegate = $ionicScrollDelegate.$getByHandle('zoom-pane');
  var view = scrollDelegate.getScrollView();
  var scale = view.__zoomLevel;
  // disable swiping between slides when zoom is active
  if (scale > 1){
    $scope.slider.lockSwipes();
  }
  else{
    $scope.slider.unlockSwipes();
  }
}

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
  // data.slider is the instance of Swiper
  $scope.slider = data.slider;
});

Answer 1

我使用了lockSwipe()，如下所示。

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;
    }
}

就我而言，当图像缩放时，X 轴上的 ionic 滑动也被锁定。