当我滑动时，slideChangeStart 事件不会触发答案

【问题标题】：slideChangeStart event does not fire when I swipe当我滑动时，slideChangeStart 事件不会触发
【发布时间】：2017-01-24 22:13:54
【问题描述】：

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

<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：

    $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 事件触发 - 我看到了警报。但是，如果我使用手势滑动页面 - 标题会按预期更改，但事件不会触发。我试过在我的选项中关闭滑动但没有成功（反正不是我的首选解决方案）：

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

更新我尝试使用slideChangeEnd，但该事件也没有触发。因此，我将所有代码移到了一个 gotoSlide(index) 方法中，我从 next、previous 和 pagerClick 方法中调用了该方法——这样我就不用依赖 ion-slides 事件了。我在我的 ion-slide-page 组件中添加了 Ionic on-swipe 指令，看看它们是否可以工作：

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

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

我正在使用 Crosswalk 插件

【问题讨论】：

尝试将 onSlideChangeEnd 属性添加到您的 vm.options。我已经成功地在选项对象中定义了我的事件
试过了。它也没有触发 - 请参阅我的编辑

标签： ionic-framework swiper ion-slides

【解决方案1】：

如果我删除 effect 选项，问题就会消失。所以这行得通：

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

而且，由于这些都是默认值，我最终完全删除了选项对象。

NB 将 'fade' 替换为 'slide' 不起作用

参考： http://ionicframework.com/docs/api/directive/ionSlides/

【讨论】：

【解决方案2】：

我遇到了类似的问题，上面的答案对我不起作用，所以我想我会分享一下：根据Swiper API（离子幻灯片的基础），您可以将基于事件的回调直接添加到小部件。

以下对我有用（假设 scope.slider 对象...）

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

Swiper API 在 Callbacks

标题下提供了可以在“on”回调函数中命名的事件列表

【讨论】：