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

Question

我需要在按下按钮时更换幻灯片，因为我是 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 也应该更改。

谁能帮我解决这个问题？

提前致谢:)

Answer 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 有多个滑块

Answer 2

由于我们在同一个视图中有多个幻灯片，我们可能会出现一些意想不到的行为，因为我们使用了相同的 Swiper 实例。我意识到，如果您有多张幻灯片，事件 '$ionicSlides.sliderInitialized' 将由每张幻灯片触发，并将 return 在 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();" 转到下一张幻灯片

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

ionic1 2 sliders on same page and its events to change particular slide

javascript

ionic-framework

ion-slides