javascript - ionic ionic 列表禁用刷卡问题

Question

我想在 ionic 中禁用 ion-list 的滑动，并在列表中使用 on hold。

已经使用 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>

Controller 和指令

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”按钮上的点击事件并重新应用 can-swipe = 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>