Danh sách ion ion vô hiệu hóa các sự cố vuốt

Question

Tôi muốn tắt tính năng vuốt cho danh sách ion trong ion và sử dụng tạm dừng cho danh sách.

Đã sử dụng can-swipe = "false" để tắt tính năng này, nhưng khi kích hoạt hành động showDelete hoặc showReorder, thao tác vuốt sẽ tự động bật lại. Có cách nào để ngăn chặn bật lại không?

Dưới đây là mã của tôi
HTML

<ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> 

    <ion-item ng-repeat="item in items" 
       item="item" 
       href="#/item/{{item.id}}" class="item-remove-animate" hold-list> 
     Item {{ item.id }} 
     <ion-delete-button class="ion-minus-circled" 
         ng-click="onItemDelete(item)"> 
     </ion-delete-button> 
     <ion-option-button class="button-assertive" 
         ng-click="edit(item)"> 
     Edit 
     </ion-option-button> 
     <ion-option-button class="button-calm" 
         ng-click="share(item)"> 
     Share 
     </ion-option-button> 
     <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
    </ion-item> 

    </ion-list> 

điều khiển và chỉ thị

angular.module('ionicApp', ['ionic']) 

.directive('holdList', ['$ionicGesture', function($ionicGesture) { 
    return { 
    restrict: 'A', 
    link: function(scope, element, attrs) { 
     $ionicGesture.on('hold', function(e) { 

     var content = element[0].querySelector('.item-content'); 

     var buttons = element[0].querySelector('.item-options'); 
     var buttonsWidth = buttons.offsetWidth; 

     ionic.requestAnimationFrame(function() { 
      content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; 

      if (!buttons.classList.contains('invisible')) { 
      content.style[ionic.CSS.TRANSFORM] = ''; 
      setTimeout(function() { 
       buttons.classList.add('invisible'); 
      }, 250); 
      } else { 
      buttons.classList.remove('invisible'); 
      content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; 
      } 
     }); 

     }, element); 
    } 
    }; 
}]) 
.controller('MyCtrl', function($scope) { 

    $scope.data = { 
    showDelete: false 
    }; 

    $scope.edit = function(item) { 
    alert('Edit Item: ' + item.id); 
    }; 
    $scope.share = function(item) { 
    alert('Share Item: ' + item.id); 
    }; 

    $scope.moveItem = function(item, fromIndex, toIndex) { 
    $scope.items.splice(fromIndex, 1); 
    $scope.items.splice(toIndex, 0, item); 
    }; 

    $scope.onItemDelete = function(item) { 
    $scope.items.splice($scope.items.indexOf(item), 1); 
    }; 

    $scope.items = [ 
    { id: 0 }, 
    { id: 1 }, 
    { id: 2 }, 
    { id: 3 }, 
    { id: 4 }, 
    { id: 5 }, 
    { id: 6 }, 
    { id: 7 }, 
    { id: 8 }, 
    { id: 9 }, 
    { id: 10 }, 
    { id: 11 }, 
    { id: 12 }, 
    { id: 13 }, 
    { id: 14 }, 
    { id: 15 }, 
    { id: 16 }, 
    { id: 17 }, 
    { id: 18 }, 
    { id: 19 }, 
    { id: 20 }, 
    { id: 21 }, 
    { id: 22 }, 
    { id: 23 }, 
    { id: 24 }, 
    { id: 25 }, 
    { id: 26 }, 
    { id: 27 }, 
    { id: 28 }, 
    { id: 29 }, 
    { id: 30 }, 
    { id: 31 }, 
    { id: 32 }, 
    { id: 33 }, 
    { id: 34 }, 
    { id: 35 }, 
    { id: 36 }, 
    { id: 37 }, 
    { id: 38 }, 
    { id: 39 }, 
    { id: 40 }, 
    { id: 41 }, 
    { id: 42 }, 
    { id: 43 }, 
    { id: 44 }, 
    { id: 45 }, 
    { id: 46 }, 
    { id: 47 }, 
    { id: 48 }, 
    { id: 49 }, 
    { id: 50 } 
    ]; 

}); 

CodePen

Answer 1

Theo đề xuất của @Anson bạn có thể xử lý thứ sự kiện nhấp chuột trên các nút 'showDelete' và 'showReorder' và áp dụng lại can-swipe = false.

Điều này có thể thu được bằng hàm (xem đoạn mã bên dưới $scope.noSwipe) thực thi $ionicListDelegate.canSwipeItems(false); bên trong $ timeout(). Điều này là cần thiết để trì hoãn hoạt động một cách thích hợp để bỏ qua một vấn đề trong phiên bản hiện tại của Ionic (xem mã số https://github.com/driftyco/ionic/blob/master/js/angular/directive/list.js#L158).

angular.module('ionicApp', ['ionic']) 
 

 
.directive('holdList', ['$ionicGesture', function($ionicGesture) { 
 
    return { 
 
    restrict: 'A', 
 
    link: function(scope, element, attrs) { 
 
     $ionicGesture.on('hold', function(e) { 
 

 
     var content = element[0].querySelector('.item-content'); 
 

 
     var buttons = element[0].querySelector('.item-options'); 
 
     var buttonsWidth = buttons.offsetWidth; 
 

 
     ionic.requestAnimationFrame(function() { 
 
      content.style[ionic.CSS.TRANSITION] = 'all ease-out .25s'; 
 

 
      if (!buttons.classList.contains('invisible')) { 
 
      content.style[ionic.CSS.TRANSFORM] = ''; 
 
      setTimeout(function() { 
 
       buttons.classList.add('invisible'); 
 
      }, 250); 
 
      } else { 
 
      buttons.classList.remove('invisible'); 
 
      content.style[ionic.CSS.TRANSFORM] = 'translate3d(-' + buttonsWidth + 'px, 0, 0)'; 
 
      } 
 
     }); 
 

 
     }, element); 
 
    } 
 
    }; 
 
}]) 
 

 
.controller('MyCtrl', function($scope, $ionicListDelegate, $timeout) { 
 

 
    $scope.data = { 
 
    showDelete: false 
 
    }; 
 

 
    $scope.edit = function(item) { 
 
    alert('Edit Item: ' + item.id); 
 
    }; 
 
    $scope.share = function(item) { 
 
    alert('Share Item: ' + item.id); 
 
    }; 
 

 
    $scope.moveItem = function(item, fromIndex, toIndex) { 
 
    $scope.items.splice(fromIndex, 1); 
 
    $scope.items.splice(toIndex, 0, item); 
 
    }; 
 

 
    $scope.onItemDelete = function(item) { 
 
    $scope.items.splice($scope.items.indexOf(item), 1); 
 
    }; 
 
    
 
    $scope.noSwipe = function() { 
 
    console.log("noSwipe"); 
 
    $timeout(function() { 
 
     $ionicListDelegate.canSwipeItems(false); 
 
    }) 
 
    }; 
 

 
    $scope.items = [ 
 
    { id: 0 }, 
 
    { id: 1 }, 
 
    { id: 2 }, 
 
    { id: 3 }, 
 
    { id: 4 }, 
 
    { id: 5 }, 
 
    { id: 6 }, 
 
    { id: 7 }, 
 
    { id: 8 }, 
 
    { id: 9 }, 
 
    { id: 10 }, 
 
    { id: 11 }, 
 
    { id: 12 }, 
 
    { id: 13 }, 
 
    { id: 14 }, 
 
    { id: 15 }, 
 
    { id: 16 }, 
 
    { id: 17 }, 
 
    { id: 18 }, 
 
    { id: 19 }, 
 
    { id: 20 }, 
 
    { id: 21 }, 
 
    { id: 22 }, 
 
    { id: 23 }, 
 
    { id: 24 }, 
 
    { id: 25 }, 
 
    { id: 26 }, 
 
    { id: 27 }, 
 
    { id: 28 }, 
 
    { id: 29 }, 
 
    { id: 30 }, 
 
    { id: 31 }, 
 
    { id: 32 }, 
 
    { id: 33 }, 
 
    { id: 34 }, 
 
    { id: 35 }, 
 
    { id: 36 }, 
 
    { id: 37 }, 
 
    { id: 38 }, 
 
    { id: 39 }, 
 
    { id: 40 }, 
 
    { id: 41 }, 
 
    { id: 42 }, 
 
    { id: 43 }, 
 
    { id: 44 }, 
 
    { id: 45 }, 
 
    { id: 46 }, 
 
    { id: 47 }, 
 
    { id: 48 }, 
 
    { id: 49 }, 
 
    { id: 50 } 
 
    ]; 
 

 
});

<html ng-app="ionicApp"> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 
 
    <title>Ionic List can swipe</title> 
 
    <link href="//code.ionicframework.com/nightly/css/ionic.css" rel="stylesheet"> 
 
    <script src="//code.ionicframework.com/nightly/js/ionic.bundle.js"></script> 
 
</head> 
 

 
<body ng-controller="MyCtrl"> 
 
    <ion-header-bar class="bar-positive"> 
 
    <div class="buttons"> 
 
     <button class="button button-icon icon ion-ios-minus-outline" ng-click="data.showDelete = !data.showDelete; data.showReorder = false; noSwipe();"></button> 
 
    </div> 
 
    <h1 class="title">Ionic Delete/Option Buttons</h1> 
 
    <div class="buttons"> 
 
     <button class="button" ng-click="data.showDelete = false; data.showReorder = !data.showReorder; noSwipe();"> 
 
     Reorder 
 
     </button> 
 
    </div> 
 
    </ion-header-bar> 
 

 
    <ion-content> 
 
    <ion-list show-delete="data.showDelete" show-reorder="data.showReorder" can-swipe="false"> 
 
     <ion-item ng-repeat="item in items" item="item" href="#/item/{{item.id}}" class="item-remove-animate" hold-list on-swipe="swipeLeft(item.id)"> 
 
     Item {{ item.id }} 
 
     <ion-delete-button class="ion-minus-circled" ng-click="onItemDelete(item)"> 
 
     </ion-delete-button> 
 
     <ion-option-button class="button-assertive" ng-click="edit(item)"> 
 
      Edit 
 
     </ion-option-button> 
 
     <ion-option-button class="button-calm" ng-click="share(item)"> 
 
      Share 
 
     </ion-option-button> 
 
     <ion-reorder-button class="ion-navicon" on-reorder="moveItem(item, $fromIndex, $toIndex)"></ion-reorder-button> 
 
     </ion-item> 
 
    </ion-list> 
 
    </ion-content> 
 
</body> 
 
</html>