Ionic Partial Swipe

Question

Wie Teilwischen in Ionic Framework zu implementieren? Ich meine diesen Fluss: 1) Wenn Benutzer den vollständigen Swipe von rechts nach links funktioniert, arbeitet ein Handler. 2) Wenn der Benutzer nicht voll Swipe und stoppt vor Item Center - ein anderer Handler.

ion-option-button Direktive realisieren nur volle Swipe. Vielleicht hat jemand ein paar frische Ideen über Teilwischen. Ich benutze Ionic 1.3.

Ich habe dieses HTML-Markup:

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

Vielen Dank für die Aufmerksamkeit und einen schönen Tag!

Answer 1

Vielleicht wird das jemandem helfen. Grundidee ist im Tracking drag Ereignis (ontouchmove Ereignis funktioniert gut auf Debugger, aber auf dem Gerät funktioniert nicht). Set Ereignisse während Seite machen:

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

Dann verfolgen dragend Ereignis:

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

Vorlage:

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

Wenn jemand eine bessere Idee haben - bitte Ihre Ideen veröffentlichen. Danke für die Aufmerksamkeit!