Search code examples
ionic-frameworkswiper.jsion-slides

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


Solution

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