我滑动时不会触发slideChangeStart事件 [英] slideChangeStart event does not fire when I swipe

问题描述

在我的Ionic 1.3.1应用程序中，我使用 ion-slides 组件来显示调查问卷的部分：

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>

在我的控制器中我会收听slideChangeStart：

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);
    });

当我点击上一个和下一个按钮时，它会调用 slider.slidePrev （）或 slider.slideNext（）， slideChangeStart 事件触发 - 我看到了警报。但是，如果我使用手势滑动页面 - 标题会按照我的预期更改，但事件不会触发。我已经尝试在我的选项中关闭滑动但没有成功（不是我的首选解决方案）：

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'
}

更新
我尝试使用 slideChangeEnd 但该事件也未触发。
所以我将所有代码移动到一个 gotoSlide（index）方法，我从下一个调用，之前的和 pagerClick 方法 - 这样我就不依赖于离子幻灯片事件。
我将Ionic on-swipe指令添加到我的ion-slide-page组件中，看看它们是否可以工作：

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()">

这使得滑动工作在Ripple仿真器中（之前它根本不工作），但它仍然无法在我的任何Android设备上工作。同样，滑动事件似乎没有触发。

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.

我正在使用Crosswalk插件

I am using the Crosswalk plugin

推荐答案

如果我删除效果选项，问题就会消失。所以这样做：

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用'slide'替换'fade'不起作用

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

参考：
< a href =http://ionicframework.com/docs/api/directive/ionSlides/ =nofollow> http://ionicframework.com/docs/api/directive/ionSlides/

这篇关于我滑动时不会触发slideChangeStart事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！