İyonik iyon listesi kaydırmayla ilgili sorunları devre dışı bırakma

Question

İyon listesinde iyon listesi için kaydırma işlemini devre dışı bırakmak ve liste için beklemeye almak istiyorum.

Zaten devre dışı bırakmak için can-tokatlamak = "false" kullanın, ancak showDelete veya showReorder eylemini tetiklerken, tokatlamak tekrar otomatik olarak tekrar etkinleştirilir. Tokatın yeniden etkinleştirilmesini önlemek için yine var mı? İşte


HTML @Anson önerdiği gibi sen th işleyebilir

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

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

Kontrolör ve Yönerge benim kodlardır 'showDelete' ve 'showReorder' düğmelerine tıklayın ve can-swipe = false'u yeniden uygulayın. Bu bir işlevle ('un altındaki snippet'e bakın) $ionicListDelegate.canSwipeItems(false);'u bir $ timeout() içinde yürütür. Bu, mevcut İyonik sürümdeki bir sorunu atlamak için işlemi uygun şekilde geciktirmek için gereklidir (bkz. Kod 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>