ionic1 同一页面上的 2 个滑块及其更改特定幻灯片的事件答案

【问题标题】：ionic1 2 sliders on same page and its events to change particular slideionic1 同一页面上的 2 个滑块及其更改特定幻灯片的事件
【发布时间】：2018-11-27 12:11:55
【问题描述】：

我需要在按下按钮时更改幻灯片，因为我是 Ionic 的新手，所以我无法实现。

<div>
    <ion-slides options="options" slider="data.slider" style="border: 1px solid;text-align: center">
        <ion-slide-page>
            <img src="slide1.png">
        </ion-slide-page>
        <ion-slide-page>
            <img src="slide1.png">
        </ion-slide-page>
    </ion-slides>
</div>
<ion-slides options="options" slider="data.slider" style="background: #fff">
    <ion-slide-page>
        <div class="product-listing-container">
        </div>
    </ion-slide-pag>
</ion-slides>
<div>
    <a class="button" ng-click="changeSlide(0)">Change Slide1</a>
    <a class="button" ng-click="changeSlide(1)">Change Slide2</a>
</div>

现在我需要在单击按钮时更改幻灯片，就像单击更改幻灯片 1 按钮一样，然后幻灯片 1 应该更改，幻灯片 2 也应该更改。

谁能帮我解决这个问题？

提前致谢:)

【问题讨论】：

“更换幻灯片”是什么意思？
如果我们在幻灯片第 1 页并单击按钮，则应显示幻灯片第 2 页
看这个例子codepen.io/-kaik-/pen/ONNzWe

标签： javascript ionic-framework ion-slides

【解决方案1】：

你可以这样做。在您的控制器中：

$scope.$on('$ionicSlides.sliderInitialized', function(event, data){
    $scope.slider = data.slider;
});

$scope.changeSlide = function(slideIndex){
    $scope.slider.slideto(slideIndex);
};

$scope.prevSlide = function(){
    $scope.slider.slidePrev();
};

$scope.nextSlide = function(){
    // you can check some condition if you need to
    // if ($scope.slider.activeIndex === 1){ ... }
    $scope.slider.slideNext();
};

在您的模板中：

<ion-slides  options="options" slider="slider">
(...)
<a class="button" ng-click="prevSlide()">Previous slide</a>
<a class="button" ng-click="changeSlide(0)">Change Slide1</a>
<a class="button" ng-click="nextSlide()">Next slide</a>

https://ionicframework.com/docs/v1/api/directive/ionSlides/

如果您的情况有多个滑块，那么您必须为每个滑块分配一个delegate-handle：

<ion-slides options="options" delegate-handle="slider1" style="border: 1px solid;text-align: center">
</ion-slides>
... 
<ion-slides options="options" delegate-handle="slider2" style="border: 1px solid;text-align: center">
</ion-slides>

在您的控制器中注入$ionicSlideBoxDelegate，并获取每个滑块的句柄：

$scope.slider1 = $ionicSlideBoxDelegate.$getByHandle('slider1');
$scope.slider2 = $ionicSlideBoxDelegate.$getByHandle('slider2');

然后在方法中使用它（注意 $ionicSlideBoxDelegate 方法不同）：

$scope.nextSlide = function(){
    $scope.slider1.next();
};

codepen example 带有多个滑块

【讨论】：

谢谢，@Gustavo 它对我有用，但现在问题我在同一页面中有 2 个滑块，我们如何处理这两个事件
Uops，对不起，我没有考虑到有 2 个滑块。看看这个codepen。我会更新答案。

【解决方案2】：

由于我们在同一个视图中有多个幻灯片，我们可能会出现一些意想不到的行为，因为我们使用了相同的 Swiper 实例。我意识到，如果您有不止一张幻灯片，则事件 '$ionicSlides.sliderInitialized' 将由每张幻灯片触发，并将在 data.slider 中返回每张幻灯片的实例。我找到的解决方案是在像 slideName 这样的选项中传递一个标识符，然后开始询问拍摄每个事件的事件并将实例保存在单独的变量中，所以当我们单击下一步时，只移动相应的幻灯片。

 $scope.$on("$ionicSlides.sliderInitialized", function (event, data) {
    // data.slider is the instance of Swiper
    if(event.targetScope.options.sliderName === 'slider1'){

      $scope.slider1 = data.slider;

    }
    else if (event.targetScope.options.sliderName === 'slider2'){
      $scope.slider2 = data.slider;
    }
});

现在在您看来，您可以使用 ng-click="slider2._slideNext(200); $event.stopPropagation();"转到下一张幻灯片

【讨论】：