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

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

你可以按照这个方法来做。在你的 Controller 中:

$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/

如果您有多个 slider (如您的情况)，那么您必须为每个 slider 分配一个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>

注入(inject)$ionicSlideBoxDelegate在您的 Controller 中，并获取每个 slider 的句柄:

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

然后在方法中使用它(注意 $ionicSlideBoxDelegate 方法是不同的):

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

codepen example有多个 slider