離子嵌套幻燈片

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