3

私の 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)から呼び出す単一のメソッドに移動しました。そして、Ionic on-swipe ディレクティブをion-slide-page コンポーネントに追加して、それらが機能するかどうかを確認しました。nextpreviouspagerClick

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

これにより、Rippleエミュレーターでスワイプが機能しました（以前はまったく機能していませんでした）が、私のAndroidデバイスではまだ機能しません。繰り返しますが、スワイプ イベントは発生していないようです。

Crosswalk プラグインを使用しています

4

2 に答える 2

0

同様の問題があり、上記の答えがうまくいかなかったので、何がうまくいったかを共有したいと思いました.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」コールバック関数で指定できるイベントのリストを提供します。

于 2017-01-13T23:57:56.163 に答える