離子離子列表禁用滑動問題

Question

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

已經使用can-swipe =“false”來禁用它，但是當觸發showDelete或showReorder操作時，滑動將再次自動啟用。 反正是否有阻止再次啟用滑動？

這是我的代碼
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>

控制器和指令

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

正如@Anson所提議的，您可以在'showDelete'和'showReorder'按鈕上處理click事件並重新應用can-swipe = false 。

這可以通過一個函數獲得（參見$scope.noSwipe下面的代碼片段），它執行$ionicListDelegate.canSwipeItems(false); 在$ timeout（）內。 為了繞過當前版本的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>