slideChangeStart event does not fire when I swipe

问题

In my Ionic 1.3.1 app I am using the ion-slides component to display sections of a questionnaire:

<ion-slides options="vm.options" slider="data.slider">
        <ion-slide-page ng-repeat="s in ::vm.sections">
            <div class="bar bar-header bar-positive">
                <button class="button button-small button-icon icon ion-chevron-left"
                        ng-click="vm.previous()"
                        ng-show="::$index !== 0"></button>
                <h1 class="title">{{::s.text}}</h1>
                <button class="button button-small button-icon icon ion-chevron-right"
                        ng-click="vm.next()"
                        ng-show="::($index + 1) < vm.sections.length"></button>
            </div>
            <ion-content class="has-header">
               <div ng-if="s.include" ng-show="s.show">
                  <!--My content-->
               </div>
            </ion-content>
        </ion-slide-page>
    </ion-slides>

In my controller I listen for the slideChangeStart:

    $scope.$on("$ionicSlides.slideChangeStart", function (event, data) {
        alert('slideChangeStart');
        vm.activeIndex = slider.activeIndex;
        vm.propertySurvey.CurrentSectionIndex = vm.activeIndex;

        //include is used on an ng-if so elements are removed from the dom
        //and the number of watchers is reduced
        //also, the slider displays the contents of the 
        //previous slide unless they are explicitly hidden
        vm.sections[slider.previousIndex].include = false;
        vm.sections[slider.previousIndex].show = false;

        initialiseQuestions(vm.activeIndex);
    });

When I click on my previous and next buttons, which call slider.slidePrev() or slider.slideNext(), the slideChangeStart event fires - and I see the alert. But if I slide the page using a gesture - the header changes as I expect but the event does not fire. I've tried switching the swipe off in my options without success (not my preferred solution anyway):

vm.options = {
   noSwiping: true,
   effect: 'fade'
}

UPDATE I tried using slideChangeEnd but that event isn't firing either. So I moved all my code into a single gotoSlide(index) method that I call from my next, previous and pagerClick methods - so that I don't rely on the ion-slides event. And I added Ionic on-swipe directives to my ion-slide-page component to see if they would work:

<ion-slide-page ng-repeat="s in ::vm.sections" 
                on-swipe-left="vm.next()" 
                on-swipe-right="vm.previous()">

That made the swipe work in the Ripple emulator (where it wasn't working at all before), but it still doesn't work on any of my android devices. Again, the swipe events don't seem to fire.

I am using the Crosswalk plugin

回答1:

The problem goes away if I remove the effect option. So this works:

vm.options = {
   noSwiping: false,
   speed: 300
}

And, since these are the default values anyway, I ended up removing the options object altogether.

NB replacing 'fade' with 'slide' did not work

Reference: http://ionicframework.com/docs/api/directive/ionSlides/

回答2:

I had a similar problem, and the above answer did not work for me, so I thought I'd share what did: Per the Swiper API (which underlies ion-slides), you can add event based call backs directly to the widget.

The following worked for me (assuming the scope.slider object...)

//the 'slideChangeStart' event has a slider argument in its callback
scope.slider.on('slideChangeStart', function(slider) {
  //do stuff - maybe you want to store the activeIndex
  scope.indexIReallyCareAbout = slider.activeIndex;
});

The Swiper API gives a list of events that can named in the 'on' callback function under the header Callbacks

来源：https://stackoverflow.com/questions/39535613/slidechangestart-event-does-not-fire-when-i-swipe

标签

ionic-framework

swiper

ion-slides