Sabutobi Sabutobi - 1 year ago 128
AngularJS Question

Ionic partial swipe

How to implement partial swipe in Ionic framework?
I mean this flow:
1) If user done the full swipe from right to left works one handler.
2) If user done not full swipe and stops before item center - another handler.

directive realize only full swipe. Maybe someone have some fresh ideas about partial swipe. I'm using Ionic 1.3.

I have this 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 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 class="col col-50 ">
<div class="task-detail-center ">{{task.Name}}</div>
<div class="task-detail-center ">{{task.Description}}</div>

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

Thanks for attention and have a nice day!

Answer Source

Maybe that will help somebody. Main idea is in tracking drag event(ontouchmove event works well on debugger, but on device doesn't work). Set events while render page:

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

Then track dragend event:

 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;


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

If someone have better idea - please post your ideas. Thanks for attention!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download