0

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

谁能帮我解决问题？

提前致谢 ：）

4

2 回答 2

2

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

$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 示例

于 2017-08-09T09:03:21.043 回答
1

由于我们在同一个视图中有多个幻灯片，我们可能会出现一些意想不到的行为，因为我们使用了相同的 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();" 转到下一张幻灯片

于 2018-11-27T04:11:55.013 回答