イオン部分スワイプ

Question

イオンフレームワークで部分スワイプを実行する方法は？ 私はこの流れを意味します： 1）右から左へのフルスワイプを行った場合、1つのハンドラが機能します。 2）ユーザーがフルスワイプでなく、アイテムセンターの前で停止した場合、別のハンドラ。

ion-option-button指示はフルスワイプのみを実現します。たぶん誰かが部分的なスワイプについて新鮮な考えを持っているかもしれません私はIonic 1.3を使用しています。

私は、このHTMLマークアップがあります。注意のため

<ion-item ng-repeat="task in incident.currentIncidentsTasks" can-swipe="true" option-buttons="itemButtons" show-delete="false"> 
          <ion-option-button side="left" id="failed-swipe"><img src="img/ic_failed_swipe.png"></ion-option-button> 
          <ion-option-button id="change-swipe"><img src="img/ic_change_swipe.png"></ion-option-button> 
          <ion-option-button id="in-progress-swipe"><img src="img/ic_inprogress_swipe.png"></ion-option-button> 
          <ion-option-button id="message-swipe"> <img src="img/ic_message_swipe.png"> </ion-option-button> 
          <ion-option-button id="confirmation-swipe"><img src="img/ic_confirm_swipe.png"></ion-option-button> 
          <div class="row "> 
           <div class="col col-10 "> 
            <img src="img/checked.png "> 
           </div> 
           <div class="col col-10 "> 
            <div><img src="img/priority_task/{{task.Priority}}.png "></div> 
            <div id="chat-img-tasks"><img src="img/chat.png "></div> 
           </div> 
           <div class="col col-50 "> 
            <div class="task-detail-center ">{{task.Name}}</div> 
            <div class="task-detail-center ">{{task.Description}}</div> 


           </div> 
           <div class="col col-30 "> 
            <div class="task-detail "><img src="img/face.png "></div> 
            <div class="task-detail ">AG: {{vm.currentTaskUser}}</div> 
           </div> 
          </div> 
         </ion-item> 

感謝をし、良い一日を！

Answer 1

多分それは誰かを助けるでしょう。 主なアイデアは、dragイベント（ontouchmoveイベントはデバッガで正常に機能しますが、デバイスでは機能しません）を追跡中です。ページをレンダリングしながら、 セットのイベント：

$ionicGestune.on('dragstart', vm.touchStartTrack, element); 
$ionicGestune.on('dragend', vm.touchEndTrack, element); 

が続いてイベントをdragendイベント追跡：

function touchEndTrack(event) { 
      if (event.gesture.distance > 370 && event.gesture.direction === "left") { 
       $scope.$apply(function() { 
        vm.isFullSwipe = false; 
        vm.isHideOptions = true; 
       }); 
      } else { 
       vm.isFullSwipe = true; 
       revertToDefaultTask(); 
      } 
     } 

テンプレート：

<ion-item ng-show="swipe.isFullSwipe && swipe.isFail && swipe.isInProgress" show-delete="false" option-buttons="itemButtons"> 

誰かが良いアイデアを持っている場合 - あなたのアイデアを投稿してください。 ご注意いただきありがとうございます！