Question

如何在Ionic框架中实现局部滑动？我的意思是这个流程： 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">

如果有人有更好的想法 - 请发表您的想法。感谢您的关注！

离子部分滑动

1 个答案: