离子嵌套幻灯片

Question

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

但是现在，如果我在内滑轨上滑动，则两个滑轨都会滑动。

我需要停止主幻灯片滑动，而内滑动滑动。谁能帮我。

Answer 1

您可以使用on-touch/release事件与$ionicSlideBoxDelegate服务相结合的方式防止父级离子滑块“滑动”。

首先你需要给你的父母<ion-slide-box> a 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