离子 - 以编程方式禁用对单个离子项目的滑动答案

【问题标题】：Ionic - Disable swiping on individual ion-items programmatically离子 - 以编程方式禁用对单个离子项目的滑动
【发布时间】：2017-07-20 14:27:17
【问题描述】：

我有一个包含离子项目的离子列表。 can-swipe 在单个项目上设置为 true。我将它切换到false 以尝试禁用对项目的滑动，但这并没有禁用滑动（这是我第一次测试，看看我是否可以将条件连接到can-swipe 属性）。

我将如何禁用某些项目，因为 can-swipe="false" 没有做到这一点？

<ion-list show-reorder="data.showReorder">
    <ion-item ng-repeat="i in items track by $index" class="item item-remove-animate"
        can-swipe="true" ng-click="manageOption($index);">
        <b>{{i.Name}}</b>
    <ion-option-button class="button-assertive" ng-click="deleteOption($index);">
        Delete
    </ion-option-button>
    <ion-reorder-button class="ion-navicon" on-reorder="moveOption(o, $fromIndex, $toIndex)"></ion-reorder-button>
    </ion-item>
</ion-list>

【问题讨论】：

标签： angularjs ionic-framework ionic

【解决方案1】：

我的应用需要这个，并且我能够使用 CSS 类来覆盖 item-content 元素上的转换，该元素作为子元素动态添加到 ion-item。

我的模板中有以下内容：

<ion-item collection-repeat="report in dashboardReports" ng-class="isSwipeable(report.id)">
  <p>Some content</p>
  <ion-option-button ng-click="itemButton(report.id)">
</ion-item>

然后在我的控制器中我有这个：

$scope.lockedItems = []

$scope.itemButton = function(id) {
  $scope.lockedItems.append(id)
}

$scope.isSwipeable = function (id) {
  if ($scope.lockedItems.indexOf(id) !== -1) {
    return 'swipe-disabled';
  } else {
    return true;
  }
};

然后在我的 CSS 中，我像这样覆盖滑动动画：

.swipe-disabled div.item-content {
    -webket-transition: none !important;
    -webket-transform: none !important;
    transform: none !important;
}

我觉得这有点 hacky，但 Eder 的解决方案对我不起作用，而且 Ion 还不支持。

【讨论】：

【解决方案2】：

尝试添加一个

ng-show="showButton(i)"

在您的离子选项按钮上或重新排序。在你的范围内，保持逻辑：

$scope.showButton(item)
{
  return item.show; //Or whatever logic you want to have. 
}

希望它有效！祝你好运！

【讨论】：

【解决方案3】：

我认为用ng-if 指令将ion-option-button 包装在div 中就可以了

【讨论】：

【解决方案4】：

can-swipe="false" 将不适用于 ion-item 仅 ion-list。

但你可以试试：

var functions = angular.module('yourmodule', []);
functions.directive('dontSwipeMe', function() {
    return {
        link: function(scope, element, attr) { 
            element.on("dragstart", function(ev) {
                ev.preventDefault();      
            });
        }
    };
});
<ion-item dontSwipeMe> </ion-item>

【讨论】：

【解决方案5】：

ion-item 的自给自足 can-swipe 指令。它对外部资源没有任何依赖：

.directive('canSwipe', function() {
  return {
    restrict: 'A',
    require:  '^ionItem',
    link: function(scope, element, attr, itemCtrl) {

      if(attr.canSwipe !== null && attr.canSwipe.length > 0 && 
         typeof(!!attr.canSwipe) === "boolean") {
        scope.$watch('!!(' + attr.canSwipe + ')', function(value) {
          canSwipe(value);
        });
      }

      canSwipe(attr.canSwipe === 'true');

      function canSwipe(can) {
        if (!itemCtrl.optionsContainer) {
          return;
        }
        // Class item-options is the flag for ionic.views.ListView whether 
        // item can be swiped (dragged):
        //    if (item && item.querySelector('.item-options')) { do drag ...}
        itemCtrl.optionsContainer.toggleClass('item-options', can);
        // Hide options button container.
        itemCtrl.optionsContainer.toggleClass('ng-hide', !can);
      } // canSwipe

    } // link
  }; // return
}) // canSwipe directive

见live can-swipe example on Codepen。

使用Ionic 1.3.1 测试。

链接：

can-swipe Github 上的指令。

【讨论】：