Ionic ion-list禁用滑動問題

我想禁用滑動離子列表中的離子列表並使用保留列表。

已經使用can-swipe =「false」來禁用它，但是當觸發showDelete或showReorder動作時，滑動會自動再次啓用。無論如何阻止再次刷卡啓用？

這裏是我的代碼
HTMLIonic ion-list禁用滑動問題

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

控制器和指令

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

來源

2016-01-13 Liew Zhi Ying

你有沒有嘗試「的setAttribute」功能（集可以刷卡= 「假」了），觸發後的showDelete或showReorder行動？ –

提議@Anson可以處理日在'showDelete'和'showReorder'按鈕上單擊事件並重新應用can-swipe = false。

這可以通過在$ timeout（）中執行$ionicListDelegate.canSwipeItems(false);的函數來獲得（參見下面的代碼片段$scope.noSwipe）。爲了繞過當前版本的Ionic中的問題，這是必要的，以便適當延遲操作（參見代碼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>

來源

2016-01-13 15:01:55 beaver

謝謝，這解決了我的問題。希望離子將在未來解決這個問題。 –

Ionic ion-list禁用滑動問題

回答

相關問題