滑动时不会触发 slideChangeStart 事件
slideChangeStart event does not fire when I swipe
在我的 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
事件触发 - 我看到了警报。但是,如果我使用手势滑动页面 - header 会按预期更改,但事件不会触发。我试过在我的选项中关闭滑动但没有成功(无论如何不是我的首选解决方案):
vm.options = {
noSwiping: true,
effect: 'fade'
}
更新
我尝试使用 slideChangeEnd
但该事件也没有触发。
所以我将我所有的代码移动到一个单一的 gotoSlide(index)
方法中,我从我的 next
、previous
和 pagerClick
方法调用 - 这样我就不会依赖 ion-slides 事件。
我将 Ionic on-swipe 指令添加到我的 ion-slide-page 组件中以查看它们是否有效:
<ion-slide-page ng-repeat="s in ::vm.sections"
on-swipe-left="vm.next()"
on-swipe-right="vm.previous()">
这使得滑动在 Ripple 模拟器中工作(之前它根本无法工作),但它仍然无法在我的任何 android 设备上工作。同样,滑动事件似乎没有触发。
我正在使用人行横道插件
如果我删除 effect
选项,问题就会消失。所以这有效:
vm.options = {
noSwiping: false,
speed: 300
}
而且,由于这些都是默认值,所以我最终完全删除了选项对象。
注意将 'fade' 替换为 'slide' 无效
我遇到了类似的问题,上面的答案对我不起作用,所以我想我会分享一下:
根据 Swiper API(ion-slides 的基础),您可以将基于事件的回调直接添加到小部件。
以下对我有用(假设 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;
});
Swiper API 给出了一个事件列表,可以在 header Callbacks[=12] 下的 'on' 回调函数中命名=]
在我的 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
事件触发 - 我看到了警报。但是,如果我使用手势滑动页面 - header 会按预期更改,但事件不会触发。我试过在我的选项中关闭滑动但没有成功(无论如何不是我的首选解决方案):
vm.options = {
noSwiping: true,
effect: 'fade'
}
更新
我尝试使用 slideChangeEnd
但该事件也没有触发。
所以我将我所有的代码移动到一个单一的 gotoSlide(index)
方法中,我从我的 next
、previous
和 pagerClick
方法调用 - 这样我就不会依赖 ion-slides 事件。
我将 Ionic on-swipe 指令添加到我的 ion-slide-page 组件中以查看它们是否有效:
<ion-slide-page ng-repeat="s in ::vm.sections"
on-swipe-left="vm.next()"
on-swipe-right="vm.previous()">
这使得滑动在 Ripple 模拟器中工作(之前它根本无法工作),但它仍然无法在我的任何 android 设备上工作。同样,滑动事件似乎没有触发。
我正在使用人行横道插件
如果我删除 effect
选项,问题就会消失。所以这有效:
vm.options = {
noSwiping: false,
speed: 300
}
而且,由于这些都是默认值,所以我最终完全删除了选项对象。
注意将 'fade' 替换为 'slide' 无效
我遇到了类似的问题,上面的答案对我不起作用,所以我想我会分享一下: 根据 Swiper API(ion-slides 的基础),您可以将基于事件的回调直接添加到小部件。
以下对我有用(假设 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;
});
Swiper API 给出了一个事件列表,可以在 header Callbacks[=12] 下的 'on' 回调函数中命名=]