Question

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

使用下面的代码，我可以放大图像，但是$ scope.slider.lockSwipes（）锁定X轴以免任何使用，没有它，当试图滚动X轴时会触发下一张幻灯片用一根手指。

（如果你不熟悉离子：离子滑片是建立在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轴上的离子滑动也被锁定。

在图像缩放期间禁用闪光灯

模板：

脚本：

1 个答案: