如何在离子中获取当前幻灯片的索引？答案

【问题标题】：how to get index of current slide in ionic?如何在离子中获取当前幻灯片的索引？
【发布时间】：2017-03-22 17:45:39
【问题描述】：

新手在这里.. 我正在使用离子幻灯片来显示一组带有相应卡号的卡片。我正在尝试获取当前离子幻灯片的索引，但目前我的应用程序只显示一个空白屏幕。这是我的 HTML 代码：

<ion-view title="Main Menu" id="page1">

   <ion-content padding="true" class="has-header" scroll="false">
      <ion-slides on-slide-changed="slideHasChanged($index)" disable-side-menu-drag="" options="{'loop': false}" slider="slider1" delegate-handle="slider1" id="mainMenu-slider1" style="width:100%;height:270px;">
         <ion-slide-page ng-repeat="card in cardNumbers" id="mainMenu-slide24" style="background:url(&quot;{{card.cardImage}}&quot;) no-repeat center;background-size:cover;"><br><br><br><br><br><br><br><br><br><br>
            <h5>Card Number:{{card.card}}</h5>
            <p>
               <h5>Balance:</h5>
         </ion-slide-page>
      </ion-slides>
      <ion-slides options="options" slider="slider2">
         <ion-slide-page id="mainMenu-slide27" style="height:400px;background-color:#d8dde6;" disable-scroll="false">1
            <h5 align="center">Transaction History</h5>
            <p>
               <div class="col text-center">
                  <button id="mainMenu-button9" class="button button-dark">View Transaction History</button>
               </div>
            </p>
         </ion-slide-page>
         <ion-slide-page id="mainMenu-slide28">2
            <div class="spacer" style="width: 300px; height: 20px;"></div>
            <button id="mainMenu-button5" class="button button-positive  button-block">Cards</button>
            <button id="mainMenu-button6" class="button button-positive  button-block">Nearby CICOs</button>
            <button id="mainMenu-button7" class="button button-positive  button-block">FAQ</button>
            <button id="mainMenu-button8" class="button button-positive  button-block">Contact Us</button>
         </ion-slide-page>
         </ion-slide>
   </ion-content>

</ion-view>

这是我的 controller.js 代码：

angular.module('app.controllers', [])

   .controller('mainMenuCtrl', ['$scope', '$stateParams', '$ionicSlideBoxDelegate', function($scope, $stateParams, $ionicSlideBoxDelegate, sendCardNumService) {

      $scope.cardNumbers = [{
         card: "12345",
         cardImage: "img/card1.png"
      }, {
         card: "678910",
         cardImage: "img/card2.png"
      }, {
         card: "111213",
         cardImage: "img/card3.png"
      }]

      $scope.currentCardNum = {}

      $scope.slideHasChanged = function($index) {
         $scope.currentCardNum = cardNumbers[$index].card;
      }

      $scope.setCurrentCardNum = function() {
         sendCardNumService.sendCardNo($scope.currentCardNum);
      }

      $scope.options = {
         direction: 'vertical',
         slidesPerView: '1',
         pagination: false,
         initialSlide: 1,
         showNavButtons: false
      };

      $scope.goToHistory = function(cardNum) {
         $location.path('/page5');
      }

   }])

【问题讨论】：

标签： angularjs ionic-framework

【解决方案1】：

先听幻灯片初始化

$scope.$on("$ionicSlides.sliderInitialized", function(event, data){
    $scope.slider = data.slider;
    //first slide loads here
    $scope.activeIndex = data.slider.activeIndex;
    console.log($scope.activeIndex); //will return 0
});

然后，当您更改幻灯片时，它用于收听幻灯片更改

$scope.$on("$ionicSlides.slideChangeStart", function(event, data){
    $scope.activeIndex = data.slider.activeIndex;
    console.log($scope.activeIndex); //will return the current index of your slide
}

你可以在$ionicSlides.slideChangeStart函数中调用你的函数

【讨论】：

【解决方案2】：

对我有用的是这个。在我的 controller.js 代码中：

$scope.options1 = {
    initialSlide: 0,
    onInit: function(slider1)
    {
        $scope.slider1 = slider1;
    },
    onSlideChangeEnd: function(slider1)
    {
        console.log('The active index is ' + slider1.activeIndex); 
        $scope.currentIdx = slider1.activeIndex;
    }

};

【讨论】：