Ионное частичное смахивание

Question

Ионное частичное смахивание

0

Как реализовать частичный салфетки в ионной структуре? Я имею в виду этот поток: 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>

Спасибо за внимание и приятный день!

Sabutobi 05 сен. 2016, в 16:18

Источник

Теги:

ionic-framework

angularjs

swipe

1 ответ

Ещё вопросы

Sabutobi · Accepted Answer · 2016-09-26T13-51-00.000Z

Может быть, это поможет кому-то. Основная идея заключается в отслеживании события 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">

Если у кого-то есть лучшая идея - пожалуйста, разместите свои идеи. Спасибо за внимание!