Question

我有一个幻灯片，在一张幻灯片中，我有一些内容和一个幻灯片。如果我滑动内容主幻灯片应该滑动。如果我在第二个幻灯片上滑动，内部幻灯片应该滑动。

但是现在，如果我在内部幻灯片上滑动，两个幻灯片都会滑动。

我需要在内滑板滑动时停止主滑盖滑动。任何人都可以帮助我。

Answer 1

您可以防止父母离子滑动盒滑动＆＃34;滑动＆＃34;通过在子项中使用on-touch/release个事件并结合$ionicSlideBoxDelegate服务。

首先，您需要向父亲<ion-slide-box>提供delegate-handle。然后，您可以捕获子滑块上的on-touch和on-release事件，以固定父级并阻止其滑动。

像这样：

<ion-slide-box delegate-handle="parent-slider" class="parent">
  <ion-slide>
      <h2>Parent</h2>

        <ion-slide-box class="child">
            <ion-slide
                on-touch="pinParent()"
                on-release="unpinParent()">

                  <h3>Child</h3>
              </ion-slide>
        </ion-slide-box>
  </ion-slide>
</ion-slide-box>

然后在您的控制器中，您可以添加两个简单的功能，以便在触摸子幻灯片时冻结父幻灯片框。

像这样：

$scope.pinParent = function () {
    $ionicSlideBoxDelegate.$getByHandle('parent-slider').enableSlide(false)
}

$scope.unpinParent = function () {
    $ionicSlideBoxDelegate.$getByHandle('parent-slider').enableSlide(true)
}

以下是CodePen示例：http://codepen.io/F1LT3R/pen/jBarQe

离子滑动的嵌套幻灯片

1 个答案: